/** * Image Preprocessing - Prepare images for model inference */ import * as ort from 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/esm/ort.min.js'; import { DETECTION_CONFIG } from '../config.js'; import { loadImage } from '../utils/imageUtils.js'; /** * Preprocess image for SigLIP models */ export async function preprocessImage(imageData, size) { const img = await loadImage(imageData); // Create canvas and resize const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, size, size); // Get image data const imageDataObj = ctx.getImageData(0, 0, size, size); const data = imageDataObj.data; // Convert to float32 tensor [1, 3, size, size] and normalize const float32Data = new Float32Array(3 * size * size); const { mean, std } = DETECTION_CONFIG.siglip; for (let i = 0; i < size * size; i++) { float32Data[i] = ((data[i * 4] / 255.0) - mean[0]) / std[0]; // R float32Data[size * size + i] = ((data[i * 4 + 1] / 255.0) - mean[1]) / std[1]; // G float32Data[2 * size * size + i] = ((data[i * 4 + 2] / 255.0) - mean[2]) / std[2]; // B } return new ort.Tensor('float32', float32Data, [1, 3, size, size]); } /** * Preprocess image for YOLO */ export async function preprocessImageYOLO(img, size) { const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, size, size); const imageData = ctx.getImageData(0, 0, size, size); const data = imageData.data; const float32Data = new Float32Array(3 * size * size); for (let i = 0; i < size * size; i++) { float32Data[i] = data[i * 4] / 255.0; float32Data[size * size + i] = data[i * 4 + 1] / 255.0; float32Data[2 * size * size + i] = data[i * 4 + 2] / 255.0; } return new ort.Tensor('float32', float32Data, [1, 3, size, size]); }