You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, language = 'eng') {
// Escape RegExp helper
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// Comprehensive list of common software programs to identify
const softwareDb = [
{ id: "Adobe Photoshop", aliases: ["Photoshop", "Adobe Photoshop"] },
{ id: "Adobe Illustrator", aliases: ["Illustrator", "Adobe Illustrator"] },
{ id: "Adobe Premiere Pro", aliases: ["Premiere Pro", "Adobe Premiere"] },
{ id: "Adobe After Effects", aliases: ["After Effects"] },
{ id: "Microsoft Visual Studio", aliases: ["Visual Studio"] },
{ id: "Visual Studio Code", aliases: ["Visual Studio Code", "VS Code", "VSCode"] },
{ id: "Google Chrome", aliases: ["Chrome", "Google Chrome"] },
{ id: "Mozilla Firefox", aliases: ["Firefox", "Mozilla Firefox"] },
{ id: "Microsoft Edge", aliases: ["Microsoft Edge", "Edge Browser"] },
{ id: "Apple Safari", aliases: ["Safari"] },
{ id: "Microsoft Word", aliases: ["Microsoft Word", "Word"] },
{ id: "Microsoft Excel", aliases: ["Microsoft Excel", "Excel"] },
{ id: "Microsoft Powerpoint", aliases: ["Powerpoint", "Microsoft Powerpoint"] },
{ id: "Notepad++", aliases: ["Notepad++"] },
{ id: "Notepad", aliases: ["Notepad"] },
{ id: "Discord", aliases: ["Discord"] },
{ id: "Slack", aliases: ["Slack"] },
{ id: "Microsoft Teams", aliases: ["Microsoft Teams"] },
{ id: "Zoom", aliases: ["Zoom Meeting", "Zoom"] },
{ id: "Skype", aliases: ["Skype"] },
{ id: "OBS Studio", aliases: ["OBS Studio", "OBS"] },
{ id: "VLC Media Player", aliases: ["VLC", "VLC media player"] },
{ id: "Spotify", aliases: ["Spotify"] },
{ id: "Apple iTunes", aliases: ["iTunes"] },
{ id: "Steam", aliases: ["Steam"] },
{ id: "Epic Games Launcher", aliases: ["Epic Games Launcher", "Epic Games"] },
{ id: "IntelliJ IDEA", aliases: ["IntelliJ IDEA", "IntelliJ"] },
{ id: "JetBrains WebStorm", aliases: ["WebStorm"] },
{ id: "JetBrains PyCharm", aliases: ["PyCharm"] },
{ id: "Eclipse IDE", aliases: ["Eclipse"] },
{ id: "Android Studio", aliases: ["Android Studio"] },
{ id: "Apple Xcode", aliases: ["Xcode"] },
{ id: "Figma", aliases: ["Figma"] },
{ id: "Sketch", aliases: ["Sketch"] },
{ id: "Blender", aliases: ["Blender"] },
{ id: "Unity", aliases: ["Unity", "Unity Editor"] },
{ id: "Unreal Engine", aliases: ["Unreal Engine", "Unreal Editor"] },
{ id: "Godot Engine", aliases: ["Godot", "Godot Engine"] },
{ id: "GitHub Desktop", aliases: ["GitHub Desktop"] },
{ id: "Docker Desktop", aliases: ["Docker Desktop", "Docker"] },
{ id: "Postman", aliases: ["Postman"] },
{ id: "AutoCAD", aliases: ["AutoCAD"] },
{ id: "Autodesk Maya", aliases: ["Autodesk Maya", "Maya"] },
{ id: "Notion", aliases: ["Notion"] },
{ id: "Evernote", aliases: ["Evernote"] },
{ id: "Trello", aliases: ["Trello"] },
{ id: "Asana", aliases: ["Asana"] },
{ id: "Jira", aliases: ["Jira"] },
{ id: "Audacity", aliases: ["Audacity"] },
{ id: "FL Studio", aliases: ["FL Studio"] },
{ id: "Ableton Live", aliases: ["Ableton", "Ableton Live"] },
{ id: "Command Prompt", aliases: ["Command Prompt", "cmd.exe"] },
{ id: "Windows PowerShell", aliases: ["PowerShell"] },
{ id: "Terminal", aliases: ["Terminal"] }
];
// Build the UI Container
const container = document.createElement('div');
container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
container.style.maxWidth = '600px';
container.style.margin = '0 auto';
container.style.padding = '25px';
container.style.backgroundColor = '#ffffff';
container.style.borderRadius = '12px';
container.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)';
container.style.color = '#1f2937';
container.style.border = '1px solid #e5e7eb';
const header = document.createElement('div');
header.style.borderBottom = '2px solid #f3f4f6';
header.style.paddingBottom = '15px';
header.style.marginBottom = '20px';
const title = document.createElement('h2');
title.textContent = 'Software Program Identifier';
title.style.margin = '0';
title.style.fontSize = '1.5rem';
title.style.color = '#111827';
header.appendChild(title);
const desc = document.createElement('p');
desc.textContent = 'Analyzing image contents and text labels to detect visible software environments and applications...';
desc.style.margin = '8px 0 0 0';
desc.style.fontSize = '0.9rem';
desc.style.color = '#6b7280';
header.appendChild(desc);
container.appendChild(header);
const previewContainer = document.createElement('div');
previewContainer.style.textAlign = 'center';
previewContainer.style.marginBottom = '20px';
previewContainer.style.backgroundColor = '#f9fafb';
previewContainer.style.border = '1px dashed #d1d5db';
previewContainer.style.padding = '10px';
previewContainer.style.borderRadius = '8px';
const imgClone = new Image();
imgClone.src = originalImg.src;
imgClone.style.maxWidth = '100%';
imgClone.style.maxHeight = '250px';
imgClone.style.objectFit = 'contain';
imgClone.style.borderRadius = '4px';
previewContainer.appendChild(imgClone);
container.appendChild(previewContainer);
const statusArea = document.createElement('div');
statusArea.style.padding = '20px';
statusArea.style.backgroundColor = '#f3f4f6';
statusArea.style.borderRadius = '8px';
statusArea.style.marginBottom = '20px';
statusArea.style.textAlign = 'center';
const statusSpinner = document.createElement('div');
statusSpinner.style.display = 'inline-block';
statusSpinner.style.width = '24px';
statusSpinner.style.height = '24px';
statusSpinner.style.border = '3px solid #d1d5db';
statusSpinner.style.borderTopColor = '#3b82f6';
statusSpinner.style.borderRadius = '50%';
statusSpinner.style.marginBottom = '10px';
statusSpinner.style.animation = 'spin 1s linear infinite';
// Add spinner animation keyframes
const styleSheet = document.createElement("style");
styleSheet.innerText = `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`;
document.head.appendChild(styleSheet);
statusArea.appendChild(statusSpinner);
const statusText = document.createElement('div');
statusText.textContent = 'Initializing OCR detection engine...';
statusText.style.fontWeight = '600';
statusText.style.color = '#374151';
statusArea.appendChild(statusText);
const progressBarBg = document.createElement('div');
progressBarBg.style.height = '6px';
progressBarBg.style.width = '100%';
progressBarBg.style.backgroundColor = '#e5e7eb';
progressBarBg.style.borderRadius = '3px';
progressBarBg.style.marginTop = '15px';
progressBarBg.style.overflow = 'hidden';
const progressBar = document.createElement('div');
progressBar.style.height = '100%';
progressBar.style.width = '0%';
progressBar.style.backgroundColor = '#3b82f6';
progressBar.style.transition = 'width 0.3s ease';
progressBarBg.appendChild(progressBar);
statusArea.appendChild(progressBarBg);
container.appendChild(statusArea);
const resultsArea = document.createElement('div');
resultsArea.style.display = 'none';
resultsArea.style.backgroundColor = '#f0fdf4';
resultsArea.style.border = '1px solid #bbf7d0';
resultsArea.style.borderRadius = '8px';
resultsArea.style.padding = '20px';
container.appendChild(resultsArea);
const resultsTitle = document.createElement('h3');
resultsTitle.textContent = 'Software Identified:';
resultsTitle.style.marginTop = '0';
resultsTitle.style.marginBottom = '15px';
resultsTitle.style.color = '#166534';
resultsArea.appendChild(resultsTitle);
const resultsListContainer = document.createElement('div');
resultsArea.appendChild(resultsListContainer);
const rawTextArea = document.createElement('div');
rawTextArea.style.marginTop = '20px';
rawTextArea.style.padding = '15px';
rawTextArea.style.backgroundColor = '#f9fafb';
rawTextArea.style.border = '1px solid #e5e7eb';
rawTextArea.style.borderRadius = '8px';
rawTextArea.style.fontSize = '0.75rem';
rawTextArea.style.maxHeight = '150px';
rawTextArea.style.overflowY = 'auto';
rawTextArea.style.whiteSpace = 'pre-wrap';
rawTextArea.style.display = 'none';
rawTextArea.style.color = '#6b7280';
const rawTextTitle = document.createElement('strong');
rawTextTitle.textContent = 'Background Extracted Text (Log View):';
rawTextTitle.style.display = 'block';
rawTextTitle.style.marginBottom = '8px';
rawTextArea.appendChild(rawTextTitle);
const rawTextContent = document.createElement('span');
rawTextArea.appendChild(rawTextContent);
container.appendChild(rawTextArea);
// Self-invoking async function to process image using Tesseract.js
(async () => {
try {
// Dynamically load Tesseract.js if it isn't available
if (!window.Tesseract) {
statusText.textContent = 'Downloading OCR Library (Tesseract.js)...';
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('Failed to load text recognition framework.'));
document.head.appendChild(script);
});
}
statusText.textContent = 'Analyzing image context...';
const result = await window.Tesseract.recognize(
originalImg,
language,
{
logger: m => {
if (m.status === 'recognizing text') {
const prog = Math.round(m.progress * 100);
progressBar.style.width = `${prog}%`;
statusText.textContent = `Scanning identifiers: ${prog}%`;
} else {
statusText.textContent = m.status.replace(/^\w/, c => c.toUpperCase()) + "...";
}
}
}
);
// Hide status area and show results
statusArea.style.display = 'none';
resultsArea.style.display = 'block';
rawTextArea.style.display = 'block';
const text = result.data.text;
rawTextContent.textContent = text || "No explicit text patterns found in image.";
// Identify software by regex boundaries
const detected = new Set();
softwareDb.forEach(sw => {
sw.aliases.forEach(alias => {
// Match whole words to prevent false positives (handles special characters like +)
const regex = new RegExp(`(?:^|\\W)${escapeRegExp(alias)}(?:$|\\W)`, 'i');
if (regex.test(text)) {
detected.add(sw.id);
}
});
});
if (detected.size === 0) {
resultsArea.style.backgroundColor = '#fef2f2';
resultsArea.style.borderColor = '#fecaca';
resultsTitle.style.color = '#991b1b';
resultsTitle.textContent = 'No Identifications Found';
resultsListContainer.textContent = 'No known software identities could be automatically matched in the text extracted from this image.';
} else {
detected.forEach(software => {
const badge = document.createElement('span');
badge.textContent = software;
badge.style.display = 'inline-block';
badge.style.backgroundColor = '#dcfce7';
badge.style.color = '#166534';
badge.style.border = '1px solid #86efac';
badge.style.padding = '6px 14px';
badge.style.borderRadius = '20px';
badge.style.margin = '4px';
badge.style.fontWeight = '600';
badge.style.fontSize = '0.9rem';
badge.style.boxShadow = '0 1px 2px rgba(0,0,0,0.05)';
resultsListContainer.appendChild(badge);
});
}
} catch (err) {
statusSpinner.style.display = 'none';
statusText.textContent = `Processing Error: ${err.message}`;
statusText.style.color = '#dc2626';
progressBarBg.style.display = 'none';
}
})();
// Synchronously return the dynamically updating container
return container;
}Apply Changes
