AI Researcher in Medicine.
All opinions are my own.
Public
Edited
Nov 8, 2022
11 stars
Interactively Assessing Disentanglement in GANsAnalyzing the Design Space for Visualizing Neural Attention in Text ClassificationTensorsVisualization in Deep LearningInteractive Convolutional Neural NetworkMachine Learning in JS with TensorFlow.js (Part I)How to visualize timeline of a Wiki article?Simulation ResultsMachine learning in the browserRecommender systemsPython in Observable through PyodideArtificial intelligence systems Timelinebackground-position ScrubberDrawings to HumansahajBERT - Bubbles chartPretrained models (image classification)Advanced pretrained models (object detection)Robotics Perturbation: Broken Joint (Rotation)Multi-Agent Evaluation: Object Counting
Image tensors
Also listed in…
TensorFlow.js
{
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')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.