AI Researcher in Medicine.
All opinions are my own.
Public
Edited
Nov 8, 2022
11 stars
{
const width = 400;
const height = 400;
const canvas = htl.html`<canvas width="${width}" height="${height}"></canvas>`;
const myTensor = tf.randomUniform([height, width, 3]);
//const myTensor = tf.zeros([height, width, 3]);
//const myTensor = tf.ones([height, width, 3]);
tf.browser.toPixels(myTensor, canvas).then(() => myTensor.dispose());
return canvas;
}
imgUrl = FileAttachment("Ramphodon_naevius_with_flower.jpeg").url()
img = new Promise((resolve, reject) => {
const width = 400;
const height = 300;
const img = htl.html`<img width=${width} height=${height} />`;
img.src = imgUrl;
img.crossOrigin = 'anonymous';
img.onload = () => resolve(img);
img.onerror = reject;
})
imgTensorRgb = tf.browser.fromPixels(img)
imgTensorRgb.rank
imgTensorRgb.shape
imgTensorRgb.toString()
{
const width = 400;
const height = 400;
const canvas = htl.html`<canvas width="${width}" height="${height}"></canvas>`;
tf.browser.toPixels(imgTensorRgb, canvas);
return canvas;
}
imgTensorGrayscale = tf.browser.fromPixels(img, 1)
imgTensorGrayscale.rank
imgTensorGrayscale.shape
{
const width = 400;
const height = 400;
const canvas = htl.html`<canvas width="${width}" height="${height}"></canvas>`;
tf.browser.toPixels(imgTensorGrayscale, canvas);
return canvas;
}
imgInMemory = new Promise((resolve, reject) => {
const width = 400;
const height = 300;
const img = new Image(width, height);
img.crossOrigin = 'anonymous';
img.src = imgUrl;
img.onload = () => resolve(img);
img.onerror = reject;
})
imgInMemoryTensorRgb = tf.browser.fromPixels(imgInMemory)
imgInMemoryTensorRgb.rank
imgInMemoryTensorRgb.shape
{
const width = 400;
const height = 400;
const canvas = htl.html`<canvas width="${width}" height="${height}"></canvas>`;
tf.browser.toPixels(imgInMemoryTensorRgb, canvas);
return canvas;
}
batchImgTensorRgb = imgTensorRgb.expandDims()
batchImgTensorRgb.shape
batchImgTensorRgb.squeeze().shape
{
const width = 100;
const height = 100;
const canvas = htl.html`<canvas/>`;
const resizedTensor = tf.tidy(() => {
const batchResizedTensors = tf.image.resizeBilinear(batchImgTensorRgb, [height, width], true);
return batchResizedTensors.squeeze().asType('int32');
});
tf.browser.toPixels(resizedTensor, canvas).then(() => {
resizedTensor.dispose();
})
return canvas;
}
{
const width = 100;
const height = 100;
const canvas = htl.html`<canvas/>`;
const resizedTensor = tf.tidy(() => {
const batchResizedTensors = tf.image.resizeNearestNeighbor(batchImgTensorRgb, [height, width], true);
return batchResizedTensors.squeeze();
});
tf.browser.toPixels(resizedTensor, canvas).then(() => {
resizedTensor.dispose();
})
return canvas;
}
{
const width = 100;
const height = 100;
const canvas = htl.html`<canvas/>`;
const croppedTensor = imgTensorRgb.slice([100, 10], [150, 200, 3]);
tf.browser.toPixels(croppedTensor, canvas).then(() => {
croppedTensor.dispose();
})
return canvas;
}
{
const width = 100;
const height = 100;
const canvas = htl.html`<canvas/>`;
const croppedResizedTensor = tf.tidy(() => {
const boxes = [[0.3, 0, 0.85, 0.55]];
const boxInd = [0];
const cropSize = [256, 256];
const batchCroppedResizedTensors = tf.image.cropAndResize(
batchImgTensorRgb.div(255), boxes, boxInd, cropSize, 'bilinear');
return batchCroppedResizedTensors.squeeze();
});
tf.browser.toPixels(croppedResizedTensor, canvas).then(() => {
croppedResizedTensor.dispose();
})
return canvas;
}
{
const canvas = htl.html`<canvas/>`;
const mirroredTensor = tf.tidy(() => {
const batchMirroredTensors = tf.image.flipLeftRight(batchImgTensorRgb.div(255));
return batchMirroredTensors.squeeze();
});
tf.browser.toPixels(mirroredTensor, canvas).then(() => {
mirroredTensor.dispose();
})
return canvas;
}
{
const width = 100;
const height = 100;
const canvas = htl.html`<canvas/>`;
const flippedTensor = imgTensorRgb.reverse(0);
tf.browser.toPixels(flippedTensor, canvas).then(() => {
flippedTensor.dispose();
})
return canvas;
}
{
const canvas = htl.html`<canvas/>`;
const rotatedTensor = tf.tidy(() => {
const batchRotatedTensors = tf.image.rotateWithOffset(batchImgTensorRgb.div(255), -0.7);
return batchRotatedTensors.squeeze();
});
tf.browser.toPixels(rotatedTensor, canvas).then(() => {
rotatedTensor.dispose();
})
return canvas;
}
tf = require('@tensorflow/tfjs@4.0.0/dist/tf.min.js')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
