${item.reading}${date.toLocaleDateString()} ยท ${time}
${item.confidence}%Run an analysis to inspect every detected digit.
'; elements.digitCount.textContent = "0 DIGITS"; elements.timing.textContent = "--"; elements.detectionCount.textContent = "--"; elements.averageConfidence.textContent = "--"; elements.windowStatus.textContent = "--"; elements.qualityBar.style.width = "0"; elements.qualityLabel.textContent = "Not analyzed"; elements.copyButton.disabled = true; elements.downloadButton.disabled = true; setActiveView("original"); } function loadFile(file) { if (!file || !file.type.startsWith("image/")) { showToast("Please select a JPG, PNG, or WebP image."); return; } if (file.size > 20 * 1024 * 1024) { showToast("The selected image is larger than 20 MB."); return; } if (selectedObjectUrl) URL.revokeObjectURL(selectedObjectUrl); selectedObjectUrl = URL.createObjectURL(file); const image = new Image(); image.onload = () => { selectedImage = image; elements.canvas.width = image.naturalWidth; elements.canvas.height = image.naturalHeight; context.drawImage(image, 0, 0); elements.canvasWrap.classList.remove("empty"); elements.clearButton.disabled = false; resetResults(); updateRunButton(); showToast("Image ready for analysis"); }; image.onerror = () => showToast("The selected image could not be opened."); image.src = selectedObjectUrl; } function clearImage() { selectedImage = null; elements.fileInput.value = ""; if (selectedObjectUrl) URL.revokeObjectURL(selectedObjectUrl); selectedObjectUrl = null; elements.canvas.width = 0; elements.canvas.height = 0; elements.canvasWrap.classList.add("empty"); elements.clearButton.disabled = true; resetResults(); updateRunButton(); } function prepareInput(image) { const modelSize = MODEL_SIZE; const workCanvas = document.createElement("canvas"); workCanvas.width = modelSize; workCanvas.height = modelSize; const workContext = workCanvas.getContext("2d", { willReadFrequently: true }); const scale = Math.min(modelSize / image.naturalWidth, modelSize / image.naturalHeight); const width = Math.round(image.naturalWidth * scale); const height = Math.round(image.naturalHeight * scale); const padX = Math.floor((modelSize - width) / 2); const padY = Math.floor((modelSize - height) / 2); workContext.fillStyle = "rgb(114, 114, 114)"; workContext.fillRect(0, 0, modelSize, modelSize); workContext.drawImage(image, padX, padY, width, height); const pixels = workContext.getImageData(0, 0, modelSize, modelSize).data; const planeSize = modelSize * modelSize; const input = new Float32Array(3 * planeSize); for (let pixel = 0, offset = 0; pixel < planeSize; pixel += 1, offset += 4) { input[pixel] = pixels[offset] / 255; input[planeSize + pixel] = pixels[offset + 1] / 255; input[2 * planeSize + pixel] = pixels[offset + 2] / 255; } return { tensor: new ort.Tensor("float32", input, [1, 3, modelSize, modelSize]), scale, padX, padY, }; } function outputValue(output, channel, prediction, channels, count) { if (output.dims[1] === channels) return output.data[channel * count + prediction]; return output.data[prediction * channels + channel]; } function decodeOutput(output, transform, image) { const channelsFirst = output.dims[1] < output.dims[2]; const channels = channelsFirst ? output.dims[1] : output.dims[2]; const count = channelsFirst ? output.dims[2] : output.dims[1]; const candidates = []; for (let prediction = 0; prediction < count; prediction += 1) { let classId = 0; let confidence = -Infinity; for (let channel = 4; channel < channels; channel += 1) { const score = outputValue(output, channel, prediction, channels, count); if (score > confidence) { confidence = score; classId = channel - 4; } } if (confidence < RECOVERY_CONFIDENCE_FLOOR || classId >= CLASS_NAMES.length) continue; const cx = outputValue(output, 0, prediction, channels, count); const cy = outputValue(output, 1, prediction, channels, count); const width = outputValue(output, 2, prediction, channels, count); const height = outputValue(output, 3, prediction, channels, count); const x1 = Math.max(0, (cx - width / 2 - transform.padX) / transform.scale); const y1 = Math.max(0, (cy - height / 2 - transform.padY) / transform.scale); const x2 = Math.min(image.naturalWidth, (cx + width / 2 - transform.padX) / transform.scale); const y2 = Math.min(image.naturalHeight, (cy + height / 2 - transform.padY) / transform.scale); if (x2 <= x1 || y2 <= y1) continue; candidates.push({ classId, confidence, x1, y1, x2, y2 }); } candidates.sort((a, b) => b.confidence - a.confidence); const allDetections = nonMaxSuppression(candidates.slice(0, 1000)); const regularDetections = allDetections.filter((item) => item.confidence >= confidenceThreshold()); return recoverTrailingDigit(allDetections, regularDetections); } function intersectionOverUnion(a, b) { const x1 = Math.max(a.x1, b.x1); const y1 = Math.max(a.y1, b.y1); const x2 = Math.min(a.x2, b.x2); const y2 = Math.min(a.y2, b.y2); const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1); const areaA = (a.x2 - a.x1) * (a.y2 - a.y1); const areaB = (b.x2 - b.x1) * (b.y2 - b.y1); return intersection / (areaA + areaB - intersection + 1e-7); } function nonMaxSuppression(candidates) { const kept = []; for (const candidate of candidates) { const suppressed = kept.some( (existing) => existing.classId === candidate.classId && intersectionOverUnion(existing, candidate) > iouThreshold(), ); if (!suppressed) kept.push(candidate); if (kept.length >= 300) break; } return kept; } function centerInside(box, container) { const centerX = (box.x1 + box.x2) / 2; const centerY = (box.y1 + box.y2) / 2; return centerX >= container.x1 && centerX <= container.x2 && centerY >= container.y1 && centerY <= container.y2; } function median(values) { if (!values.length) return 0; const sorted = [...values].sort((a, b) => a - b); const middle = Math.floor(sorted.length / 2); return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2; } function recoverTrailingDigit(allDetections, regularDetections) { const bestWindow = regularDetections .filter((item) => item.classId === 1) .sort((a, b) => b.confidence - a.confidence)[0]; if (!bestWindow) return regularDetections; const trustedDigits = regularDetections .filter((item) => item.classId >= 2 && item.classId <= 11 && centerInside(item, bestWindow)) .sort((a, b) => (a.x1 + a.x2) / 2 - (b.x1 + b.x2) / 2); if (trustedDigits.length < 4) return regularDetections; const centers = trustedDigits.map((item) => (item.x1 + item.x2) / 2); const pitch = median(centers.slice(1).map((center, index) => center - centers[index])); if (pitch <= 0) return regularDetections; const lastCenter = centers.at(-1); const expectedCenter = lastCenter + pitch; const medianY = median(trustedDigits.map((item) => (item.y1 + item.y2) / 2)); const medianHeight = median(trustedDigits.map((item) => item.y2 - item.y1)); const candidates = allDetections .filter((item) => ( item.classId >= 2 && item.classId <= 11 && item.confidence < confidenceThreshold() && centerInside(item, bestWindow) )) .map((item) => { const centerX = (item.x1 + item.x2) / 2; const centerY = (item.y1 + item.y2) / 2; return { item, centerX, positionError: Math.abs(centerX - expectedCenter), verticalError: Math.abs(centerY - medianY), }; }) .filter(({ centerX, positionError, verticalError }) => ( centerX > lastCenter + pitch * 0.45 && centerX < lastCenter + pitch * 1.6 && positionError <= pitch * 0.55 && verticalError <= Math.max(4, medianHeight * 0.7) )) .sort((a, b) => ( (a.positionError / pitch) - (b.positionError / pitch) || b.item.confidence - a.item.confidence )); if (!candidates.length) return regularDetections; return [...regularDetections, { ...candidates[0].item, recovered: true }]; } function reconstructReading(detections) { const windows = detections.filter((item) => item.classId === 1); let digits = detections.filter((item) => item.classId >= 2 && item.classId <= 11); const bestWindow = windows.sort((a, b) => b.confidence - a.confidence)[0]; if (bestWindow) digits = digits.filter((digit) => centerInside(digit, bestWindow)); digits.sort((a, b) => (a.x1 + a.x2) / 2 - (b.x1 + b.x2) / 2); const rawReading = digits.map((digit) => String(digit.classId - 2)).join(""); const safeReading = digits.map((digit) => ( digit.confidence < unknownThreshold() ? "?" : String(digit.classId - 2) )).join(""); return { rawReading, safeReading, digits, bestWindow, }; } function drawOriginal() { if (!selectedImage) return; elements.canvas.width = selectedImage.naturalWidth; elements.canvas.height = selectedImage.naturalHeight; context.drawImage(selectedImage, 0, 0); } function drawDetections() { if (!selectedImage) return; drawOriginal(); const lineWidth = Math.max(2, Math.round(Math.min(elements.canvas.width, elements.canvas.height) / 320)); const fontSize = Math.max(13, Math.round(Math.min(elements.canvas.width, elements.canvas.height) / 42)); context.lineWidth = lineWidth; context.font = `700 ${fontSize}px ui-monospace, monospace`; context.textBaseline = "top"; for (const detection of lastDetections) { const isUnknownDigit = detection.classId >= 2 && detection.classId <= 11 && detection.confidence < unknownThreshold(); const color = isUnknownDigit ? "#ff7083" : COLORS[detection.classId]; const classLabel = isUnknownDigit ? `? raw:${CLASS_NAMES[detection.classId]}` : CLASS_NAMES[detection.classId]; const label = `${classLabel} ${(detection.confidence * 100).toFixed(0)}%`; context.strokeStyle = color; context.strokeRect(detection.x1, detection.y1, detection.x2 - detection.x1, detection.y2 - detection.y1); const textWidth = context.measureText(label).width; const labelY = Math.max(0, detection.y1 - fontSize - 8); context.fillStyle = color; context.fillRect(detection.x1, labelY, textWidth + 10, fontSize + 8); context.fillStyle = "#041018"; context.fillText(label, detection.x1 + 5, labelY + 4); } } function setActiveView(view) { activeView = view; elements.detectedViewButton.classList.toggle("active", view === "detected"); elements.originalViewButton.classList.toggle("active", view === "original"); elements.imageBadge.textContent = view === "detected" ? "AI DETECTION OVERLAY" : "ORIGINAL PREVIEW"; if (!selectedImage) return; if (view === "detected" && lastDetections.length) drawDetections(); else drawOriginal(); } function displayReading(safeReading, rawReading, digits, bestWindow) { lastReading = safeReading; const average = digits.length ? digits.reduce((sum, digit) => sum + digit.confidence, 0) / digits.length : 0; const percent = Math.round(average * 100); const unknownDigits = digits.filter((digit) => digit.confidence < unknownThreshold()); elements.digitCount.textContent = `${digits.length} ${digits.length === 1 ? "DIGIT" : "DIGITS"}`; elements.rawReadingOutput.textContent = rawReading || "------"; elements.unknownCount.textContent = `${unknownDigits.length} unknown`; elements.unknownCount.className = unknownDigits.length ? "has-unknown" : ""; elements.averageConfidence.textContent = digits.length ? `${percent}%` : "--"; elements.windowStatus.textContent = bestWindow ? `${Math.round(bestWindow.confidence * 100)}% FOUND` : "NOT FOUND"; elements.qualityBar.style.width = `${percent}%`; elements.qualityLabel.textContent = percent >= 85 ? "Excellent" : percent >= 65 ? "Good" : percent ? "Review" : "Not detected"; if (safeReading) { elements.readingOutput.textContent = safeReading; elements.readingState.textContent = unknownDigits.length ? "NEEDS REVIEW" : "DETECTED"; elements.readingState.className = unknownDigits.length ? "warning" : "success"; elements.copyButton.disabled = false; elements.confidenceOutput.innerHTML = digits.map((digit) => { const isUnknown = digit.confidence < unknownThreshold(); const shownDigit = isUnknown ? "?" : digit.classId - 2; const rawNote = isUnknown ? `RAW ${digit.classId - 2}` : "CONFIDENCE"; return `No complete reading detected. Try a clearer, straighter image.
'; } } function historyItems() { try { return JSON.parse(localStorage.getItem(HISTORY_KEY) || "[]"); } catch { return []; } } function saveHistory(reading, confidence, duration) { if (!reading) return; const items = historyItems(); items.unshift({ reading, confidence, duration, timestamp: Date.now() }); localStorage.setItem(HISTORY_KEY, JSON.stringify(items.slice(0, 8))); renderHistory(); } function renderHistory() { const items = historyItems(); elements.clearHistoryButton.disabled = items.length === 0; if (!items.length) { elements.historyList.innerHTML = '