Can you help me see how Skia can implement the YOLO algorithm?

[bbhxwl]

https://github.com/orgs/ultralytics/discussions/22398#discussioncomment-14730206

// Common helpers
function computeLetterboxParams(w, h, size = 640) {
  const scale = Math.min(size / w, size / h);
  const nw = Math.round(w * scale), nh = Math.round(h * scale);
  const dx = Math.floor((size - nw) / 2), dy = Math.floor((size - nh) / 2);
  return { scale, nw, nh, dx, dy, size };
}

function rgbaToNCHWFloat32(rgba, w, h) {
  const HW = w * h;
  const out = new Float32Array(3 * HW);
  // RGBA -> RGB planar, normalized to [0,1]
  for (let i = 0, p = 0; i < HW; i++, p += 4) {
    out[i] = rgba[p] / 255;            // R
    out[HW + i] = rgba[p + 1] / 255;   // G
    out[2 * HW + i] = rgba[p + 2] / 255; // B
  }
  return out; // pass with shape [1, 3, h, w]
}

async function preprocessWeb(img, size = 640) {
  const { width: w, height: h } = img;
  const { scale, nw, nh, dx, dy } = computeLetterboxParams(w, h, size);

  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, size, size);
  ctx.drawImage(img, 0, 0, w, h, dx, dy, nw, nh);

  const { data: rgba } = ctx.getImageData(0, 0, size, size);
  const nchw = rgbaToNCHWFloat32(rgba, size, size);
  return { nchw, shape: [1, 3, size, size], letterbox: { scale, dx, dy } };
}

[wcandillon]

these two examples might help you show how to deal with pixel data in Skia:
https://github.com/Shopify/react-native-skia/blob/main/apps/example/src/Examples/API/Data.tsx
https://github.com/wcandillon/react-native-webgpu/blob/main/apps/example/src/MNISTInference/MNISTInference.tsx#L85