async function processImage(originalImg, titleText = "Windows PC Identifier Software", maxRes = 720) {
// dynamically load TensorFlow and MobileNet for actual image identification
async function loadScript(src, globalVarName) {
if (window[globalVarName]) return window[globalVarName];
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = src;
script.crossOrigin = "anonymous";
script.onload = () => resolve(window[globalVarName]);
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
let resultText = "System Error";
let subResultText = "Could not initialize ML modules.";
try {
// Load ML libs purely via browser JS built-ins
await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.20.0/dist/tf.min.js', 'tf');
const mobilenetLib = await loadScript('https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js', 'mobilenet');
// Cache the model globally to speed up repeated runs
if (!window._cachedMobilenetModel) {
window._cachedMobilenetModel = await mobilenetLib.load({ version: 2, alpha: 0.5 });
}
const model = window._cachedMobilenetModel;
const predictions = await model.classify(originalImg);
const top = predictions[0];
resultText = `Subject: ${top.className.toUpperCase()}`;
subResultText = `Match %: ${(top.probability * 100).toFixed(2)}% confident`;
} catch (e) {
console.error("ML Verification Error:", e);
// Fallback gracefully without external dependencies if blocked (e.g. CORS)
resultText = "Status: OFFLINE MODE / C.O.R.S";
subResultText = `Image size scanned: ${originalImg.width} x ${originalImg.height} px`;
}
// Windows 95 Visual GUI rendering logic
const bgColors = {
win95: "#c0c0c0",
titlebar: "#000080",
titletext: "#ffffff",
emptySpace: "#808080"
};
let imgW = originalImg.width;
let imgH = originalImg.height;
// Scale down image if it's too large while maintaining aspect ratio
if (imgW > maxRes || imgH > maxRes) {
const aspect = imgW / imgH;
if (imgW > imgH) {
imgW = maxRes;
imgH = maxRes / aspect;
} else {
imgH = maxRes;
imgW = maxRes * aspect;
}
}
imgW = Math.floor(imgW);
imgH = Math.floor(imgH);
// Enforce a minimum width so text headers always fit nicely
const minImgW = 340;
let panelW = Math.max(imgW, minImgW);
const padding = 10;
const titleHeight = 24;
const menuHeight = 20;
const footerHeight = 44;
const width = panelW + 32;
const height = imgH + 130; // Dynamically calculate matching strict height requirement
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
// Standardized fake 3D borders for retro elements
function drawBevel(x, y, w, h, isSunken) {
ctx.fillStyle = isSunken ? "#808080" : "#ffffff";
ctx.fillRect(x, y, w, 2);
ctx.fillRect(x, y, 2, h);
ctx.fillStyle = isSunken ? "#ffffff" : "#000000";
ctx.fillRect(x, y + h - 2, w, 2);
ctx.fillRect(x + w - 2, y, 2, h);
ctx.fillStyle = isSunken ? "#000000" : "#dfdfdf";
ctx.fillRect(x + 1, y + 1, w - 2, 1);
ctx.fillRect(x + 1, y + 1, 1, h - 2);
ctx.fillStyle = isSunken ? "#dfdfdf" : "#808080";
ctx.fillRect(x + 1, y + h - 2, w - 2, 1);
ctx.fillRect(x + w - 2, y + 1, 1, h - 2);
}
// Outer background
ctx.fillStyle = bgColors.win95;
ctx.fillRect(0, 0, width, height);
// Main window casing
drawBevel(0, 0, width, height, false);
// Titlebar
ctx.fillStyle = bgColors.titlebar;
ctx.fillRect(3, 3, width - 6, titleHeight);
// Titlebar icon (Mock generic application icon)
const iconBaseX = 7;
const iconBaseY = 3 + (titleHeight - 14) / 2;
ctx.fillStyle = "#ffffff";
ctx.fillRect(iconBaseX, iconBaseY, 14, 14);
ctx.fillStyle = "#00aaaa";
ctx.fillRect(iconBaseX + 2, iconBaseY + 2, 10, 10);
ctx.fillStyle = "#aa0000";
ctx.beginPath();
ctx.arc(iconBaseX + 7, iconBaseY + 7, 3, 0, Math.PI * 2);
ctx.fill();
// Title text
ctx.fillStyle = bgColors.titletext;
ctx.font = "bold 13px 'Trebuchet MS', Arial, sans-serif";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText(titleText, 26, 3 + titleHeight / 2);
// Minimize, Maximize, Close Buttons Mockup
const btnSize = titleHeight - 4;
const btnX = width - 3 - btnSize - 2;
const btnY = 3 + 2;
drawBevel(btnX, btnY, btnSize, btnSize, false);
ctx.fillStyle = bgColors.win95;
ctx.fillRect(btnX + 2, btnY + 2, btnSize - 4, btnSize - 4);
ctx.fillStyle = "#000000";
ctx.font = "bold 11px Arial";
ctx.textAlign = "center";
ctx.fillText("X", btnX + btnSize / 2, btnY + btnSize / 2 + 1);
// Menu bar text
ctx.fillStyle = "#000000";
ctx.font = "12px Tahoma, Arial, sans-serif";
ctx.textAlign = "left";
ctx.fillText("File Edit View Help", 8, 3 + titleHeight + menuHeight / 2);
// Image viewer panel
const panelX = 14;
const panelY = 3 + titleHeight + menuHeight + padding;
drawBevel(panelX, panelY, panelW + 4, imgH + 4, true);
// Panel background (if it spreads wider than original image constraint)
ctx.fillStyle = bgColors.emptySpace;
ctx.fillRect(panelX + 2, panelY + 2, panelW, imgH);
// Center output image precisely inside expanding window frame
const imgDrawX = panelX + 2 + (panelW - imgW) / 2;
const imgDrawY = panelY + 2;
ctx.drawImage(originalImg, imgDrawX, imgDrawY, imgW, imgH);
// Status / Identification Results Panel
const statusY = panelY + imgH + 4 + padding;
drawBevel(panelX, statusY, panelW + 4, footerHeight, true);
ctx.fillStyle = bgColors.win95;
ctx.fillRect(panelX + 2, statusY + 2, panelW, footerHeight - 4);
// Status text rendering
ctx.fillStyle = "#000000";
ctx.font = "13px 'Courier New', Courier, monospace";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText(resultText, panelX + 10, statusY + 14);
ctx.fillText(subResultText, panelX + 10, statusY + 30);
return canvas;
}This tool uses machine learning to identify and classify the contents of an image. By analyzing the visual data, it provides the name of the detected subject along with a confidence percentage. It is useful for quickly identifying unknown objects, animals, or items in photographs, making it a helpful resource for educational purposes or general curiosity.