You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, language = 'eng', contrastLevel = 1.2) {
// 1. Create Main Container
const container = document.createElement('div');
container.style.cssText = `
max-width: 650px;
margin: 0 auto;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #121212;
color: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
`;
// 2. Application Header
const header = document.createElement('div');
header.style.cssText = 'font-size: 26px; font-weight: 800; color: #f5c518; text-align: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 12px;';
header.innerHTML = '🎬 IMDb Photo Identifier & Similar Search';
container.appendChild(header);
// 3. Image Display Canvas
const imgCanvas = document.createElement('canvas');
imgCanvas.style.cssText = 'max-width: 100%; height: auto; display: block; margin: 0 auto 24px auto; border-radius: 8px; border: 2px solid #2a2a2a;';
container.appendChild(imgCanvas);
// 4. Status and Intelligence Panel
const statusBox = document.createElement('div');
statusBox.style.cssText = `
padding: 20px;
background-color: #1e1e1e;
border-radius: 8px;
text-align: center;
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #333;
transition: all 0.3s ease;
`;
statusBox.innerHTML = '<span style="color: #b3b3b3; font-style: italic;">Preparing image analysis...</span>';
container.appendChild(statusBox);
// 5. Actions / Buttons Container
const actionsContainer = document.createElement('div');
actionsContainer.style.cssText = 'display: none; margin-top: 24px; flex-wrap: wrap; gap: 12px; justify-content: center;';
container.appendChild(actionsContainer);
// 6. Asynchronous Processing Execution
(async () => {
try {
// Draw original image on canvas with optional contrast boost for better OCR readability
const width = originalImg.width || originalImg.naturalWidth;
const height = originalImg.height || originalImg.naturalHeight;
imgCanvas.width = width;
imgCanvas.height = height;
const ctx = imgCanvas.getContext('2d');
if (Number(contrastLevel) !== 1) {
ctx.filter = `contrast(${contrastLevel})`;
}
ctx.drawImage(originalImg, 0, 0, width, height);
// Import Tesseract.js dynamically for free client-side Optical Character Recognition
statusBox.innerHTML = '<span style="color: #00bcd4; font-weight: bold;">Loading AI Vision Models...</span>';
if (!window.Tesseract) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
script.onload = resolve;
script.onerror = () => reject(new Error('Network error loading OCR models.'));
document.head.appendChild(script);
});
}
statusBox.innerHTML = '<span style="color: #00bcd4; font-weight: bold;">Scanning image for movie names or subtitles...</span>';
// Execute Recognition
const result = await window.Tesseract.recognize(imgCanvas, language, {
logger: m => {
if (m.status === 'recognizing text') {
statusBox.innerHTML = `<span style="color: #00bcd4; font-weight: bold;">Analyzing visual features... ${Math.round(m.progress * 100)}%</span>`;
}
}
});
// Extract logic - finding the visually largest line of text (like a movie title on a poster)
const lines = result.data.lines || [];
let mainTitle = "";
let maxLineHeight = 0;
for (let line of lines) {
const h = line.bbox.y1 - line.bbox.y0;
const txt = line.text.trim();
// Filter out small visual artifacts and noise
if (h > maxLineHeight && txt.length > 2) {
maxLineHeight = h;
mainTitle = txt;
}
}
// Cleanup strange OCR characters, preserving movie names/quotes
mainTitle = mainTitle.replace(/[^a-zA-Z0-9\s:!'?-]/g, '').trim();
if (!mainTitle || mainTitle.length < 2) {
// Fallback to bulk extracted text
mainTitle = result.data.text.replace(/[^a-zA-Z0-9\s:!'?-]/g, '').trim().substring(0, 50);
}
// Handling Failure Case
if (!mainTitle || mainTitle.length < 2) {
statusBox.innerHTML = `
<span style="color: #ef5350; font-weight: bold; font-size: 16px;">
⚠️ No readable movie title or text found in image.
</span>
<span style="color: #aaa; font-size: 14px; margin-top: 8px;">
Try a poster, end screen, or screenshot with clearer visual text elements.
</span>
`;
return;
}
// Populate Success Data
statusBox.innerHTML = `
<div style="font-size: 14px; color: #a0a0a0; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px;">Identified Name / Subject</div>
<div style="font-size: 24px; font-weight: 900; color: #f5c518; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">"${mainTitle}"</div>
`;
// Append Raw Details Toggle (Good for transparency)
const details = document.createElement('details');
details.style.cssText = 'margin-top: 14px; font-size: 12px; color: #888; width: 100%; text-align: left;';
details.innerHTML = `
<summary style="cursor: pointer; color: #00bcd4; outline: none; transition: color 0.2s;">View Raw OCR Dump</summary>
<div style="background: #111; padding: 10px; border-radius: 6px; margin-top: 8px; border: 1px solid #333; max-height: 100px; overflow-y: auto; font-family: monospace;">
${result.data.text || 'None'}
</div>
`;
statusBox.appendChild(details);
// Construct Link Actions
const createBtn = (text, url, bg, color) => {
const a = document.createElement('a');
a.href = url;
a.target = '_blank';
a.style.cssText = `
display: inline-flex;
align-items: center;
padding: 12px 20px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
color: ${color};
background-color: ${bg};
border-radius: 6px;
transition: transform 0.2s, opacity 0.2s;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
outline: none;
`;
a.innerHTML = text;
a.onmouseover = () => { a.style.opacity = '0.9'; a.style.transform = 'translateY(-2px)'; };
a.onmouseout = () => { a.style.opacity = '1'; a.style.transform = 'translateY(0)'; };
return a;
};
// Generate precise search formulas mapped to user requirements
const imdbUrl = `https://www.imdb.com/find?q=${encodeURIComponent(mainTitle)}&s=tt`;
const similarUrl = `https://www.google.com/search?q=${encodeURIComponent(mainTitle + ' similar movies and tv shows list')}`;
const yandexReverseUrl = `https://yandex.com/images/search?text=${encodeURIComponent(mainTitle + ' movie or tv show origin')}`;
// Inject Buttons
actionsContainer.appendChild(createBtn('🔍 Find on IMDb', imdbUrl, '#f5c518', '#000000'));
actionsContainer.appendChild(createBtn('🎥 Find Similar Movies & TV', similarUrl, '#1a73e8', '#ffffff'));
actionsContainer.appendChild(createBtn('🔎 Find Image Matches', yandexReverseUrl, '#dd2c00', '#ffffff'));
actionsContainer.style.display = 'flex'; // Reveals UI
} catch (err) {
statusBox.innerHTML = `<span style="color: #ef5350; font-weight: bold;">Error during image identification: ${err.message}</span>`;
}
})();
// Synchronously returns UI framework while Intelligence Model initializes and computes asynchronously
return container;
}Apply Changes
