async function processImage(originalImg, lang = 'ru', limit = 3) {
// Determine target Wikipedia language and max result count
const languageCode = typeof lang === 'string' ? lang.trim() : 'ru';
const maxResults = typeof limit === 'number' ? limit : parseInt(limit, 10) || 3;
// Create main UI container
const container = document.createElement('div');
container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
container.style.maxWidth = '800px';
container.style.margin = '0 auto';
container.style.padding = '20px';
container.style.border = '1px solid #e0e0e0';
container.style.borderRadius = '12px';
container.style.backgroundColor = '#ffffff';
container.style.boxShadow = '0 6px 12px rgba(0,0,0,0.05)';
container.style.boxSizing = 'border-box';
// Header element
const header = document.createElement('h2');
header.textContent = 'Wikipedia Similarity Scanner & Identifier';
header.style.marginTop = '0';
header.style.color = '#202124';
header.style.borderBottom = '2px solid #1a73e8';
header.style.paddingBottom = '12px';
header.style.fontSize = '22px';
container.appendChild(header);
// Status / Loading text
const statusLabel = document.createElement('div');
statusLabel.style.color = '#5f6368';
statusLabel.style.fontSize = '16px';
statusLabel.style.lineHeight = '1.5';
statusLabel.style.marginBottom = '20px';
statusLabel.style.display = 'flex';
statusLabel.style.alignItems = 'center';
statusLabel.style.gap = '10px';
// Simple CSS spinner inside status label
statusLabel.innerHTML = `
<style>
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spinner { border: 3px solid #f3f3f3; border-top: 3px solid #1a73e8; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
</style>
<div class="spinner"></div> <span>Initializing AI identification model... Please wait.</span>
`;
container.appendChild(statusLabel);
// Container for results
const resultsContainer = document.createElement('div');
resultsContainer.style.display = 'grid';
resultsContainer.style.gap = '16px';
container.appendChild(resultsContainer);
// Helper for loading external scripts via Promise
const loadDependency = async (globalObjectName, url) => {
if (window[globalObjectName]) return window[globalObjectName];
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.crossOrigin = 'anonymous';
script.onload = () => resolve(window[globalObjectName]);
script.onerror = reject;
document.head.appendChild(script);
});
};
// Begin asynchronous classification and fetching
(async () => {
try {
// Load TensorFlow.js and MobileNet
await loadDependency('tf', 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.20.0/dist/tf.min.js');
await loadDependency('mobilenet', 'https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js');
const statusText = statusLabel.querySelector('span');
if (statusText) statusText.textContent = 'Scanning and identifying image context...';
// Load model and classify image
const model = await window.mobilenet.load({ version: 2, alpha: 1.0 });
const predictions = await model.classify(originalImg);
if (!predictions || predictions.length === 0) {
statusLabel.innerHTML = 'Could not explicitly identify the image subject.';
return;
}
// Extract the top subject, clean up format (Mobilenet often returns a comma separated list of exact names)
const topPrediction = predictions[0];
const subject = topPrediction.className.split(',')[0].trim();
const confidence = Math.round(topPrediction.probability * 100);
if (statusText) {
statusText.innerHTML = `Identified: <strong>${subject}</strong> (${confidence}% confidence).<br>Searching Wikipedia (${languageCode.toUpperCase()}) for visually similar overviews...`;
}
// Fetch info from Wikipedia API using the identified term
// Action=query with generator=search gets relevant articles.
const wpUrl = `https://${languageCode}.wikipedia.org/w/api.php?action=query&format=json&origin=*&prop=pageimages|extracts|info&inprop=url&generator=search&gsrsearch=${encodeURIComponent(subject)}&gsrlimit=${maxResults}&exchars=250&exintro=1&pithumbsize=400`;
const wpResponse = await fetch(wpUrl);
const wpData = await wpResponse.json();
if (!wpData || !wpData.query || !wpData.query.pages) {
statusLabel.innerHTML = `Identified as "<strong>${subject}</strong>", but no related Wikipedia articles or similar subjects were found for language '${languageCode}'.`;
return;
}
// Hide the status text as we have our actual results
statusLabel.style.display = 'none';
// 1. Display Top Level Overview (Identified Context)
const topInfo = document.createElement('div');
topInfo.style.display = 'flex';
topInfo.style.alignItems = 'center';
topInfo.style.gap = '15px';
topInfo.style.marginBottom = '10px';
topInfo.style.padding = '16px';
topInfo.style.backgroundColor = '#e8f0fe';
topInfo.style.borderRadius = '8px';
topInfo.style.border = '1px solid #d2e3fc';
const originalThumb = document.createElement('img');
originalThumb.src = originalImg.src;
originalThumb.style.width = '70px';
originalThumb.style.height = '70px';
originalThumb.style.objectFit = 'cover';
originalThumb.style.borderRadius = '6px';
originalThumb.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
const summary = document.createElement('div');
summary.innerHTML = `<h3 style="margin: 0 0 8px 0; color: #1a73e8; font-size: 18px;">Target Identified: ${subject}</h3>
<p style="margin: 0; font-size: 14px; color: #3c4043;">Confidence: <strong>${confidence}%</strong>. Displaying top matched profiles and overviews from Wikipedia.</p>`;
topInfo.appendChild(originalThumb);
topInfo.appendChild(summary);
resultsContainer.appendChild(topInfo);
// 2. Iterate and display individual Wikipedia pages (similar subjects/images overview)
const pages = Object.values(wpData.query.pages).sort((a, b) => a.index - b.index);
pages.forEach(page => {
const card = document.createElement('div');
card.style.display = 'flex';
card.style.flexDirection = 'row';
card.style.flexWrap = 'wrap';
card.style.padding = '16px';
card.style.border = '1px solid #f1f3f4';
card.style.borderRadius = '8px';
card.style.backgroundColor = '#f8f9fa';
card.style.gap = '16px';
card.style.transition = 'box-shadow 0.2s ease';
// Allow hover effect to resemble clickable elements
card.onmouseenter = () => card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.08)';
card.onmouseleave = () => card.style.boxShadow = 'none';
// Image Thumbnail Block
const imgBox = document.createElement('div');
imgBox.style.flexShrink = '0';
imgBox.style.width = '140px';
imgBox.style.height = '140px';
imgBox.style.backgroundColor = '#e8eaed';
imgBox.style.borderRadius = '8px';
imgBox.style.overflow = 'hidden';
imgBox.style.display = 'flex';
imgBox.style.alignItems = 'center';
imgBox.style.justifyContent = 'center';
if (page.thumbnail && page.thumbnail.source) {
const img = document.createElement('img');
img.src = page.thumbnail.source;
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
imgBox.appendChild(img);
} else {
imgBox.innerHTML = '<span style="color:#80868b; font-size:13px; text-align:center; padding: 10px;">No Cover Image</span>';
}
// Text Content Block
const contentBox = document.createElement('div');
contentBox.style.flexGrow = '1';
contentBox.style.minWidth = '200px';
const title = document.createElement('h4');
title.style.margin = '0 0 10px 0';
title.style.fontSize = '18px';
const link = document.createElement('a');
link.href = page.fullurl || `https://${languageCode}.wikipedia.org/?curid=${page.pageid}`;
link.target = '_blank';
link.style.color = '#1a73e8';
link.style.textDecoration = 'none';
link.textContent = page.title;
link.onmouseenter = () => link.style.textDecoration = 'underline';
link.onmouseleave = () => link.style.textDecoration = 'none';
title.appendChild(link);
const extract = document.createElement('div');
extract.style.fontSize = '14px';
extract.style.color = '#3c4043';
extract.style.lineHeight = '1.6';
extract.innerHTML = page.extract ? page.extract.replace(/(<([^>]+)>)/gi, " ").substring(0, 200) + '...' : 'No description overview available for this entry.';
const externalLinkBtn = document.createElement('a');
externalLinkBtn.href = page.fullurl || `https://${languageCode}.wikipedia.org/?curid=${page.pageid}`;
externalLinkBtn.target = '_blank';
externalLinkBtn.textContent = 'View on Wikipedia';
externalLinkBtn.style.display = 'inline-block';
externalLinkBtn.style.marginTop = '12px';
externalLinkBtn.style.fontSize = '13px';
externalLinkBtn.style.color = '#1a73e8';
externalLinkBtn.style.fontWeight = 'bold';
externalLinkBtn.style.textDecoration = 'none';
contentBox.appendChild(title);
contentBox.appendChild(extract);
contentBox.appendChild(externalLinkBtn);
card.appendChild(imgBox);
card.appendChild(contentBox);
resultsContainer.appendChild(card);
});
} catch (err) {
statusLabel.innerHTML = `<strong>Error:</strong> An error occurred while processing (${err.message})`;
statusLabel.style.color = '#d93025';
}
})();
// Synchronously return the container (useful for injecting instantly using .html())
return container;
}The Image Wikipedia Similarity Scanner and Identifier uses AI-powered image recognition to identify the subject of an uploaded photo and find related information. By analyzing the image content, the tool automatically searches Wikipedia to provide context, summaries, and links to relevant articles. This is useful for identifying unknown objects, landmarks, animals, or historical figures and quickly learning more about them through reliable encyclopedic sources.