Public
Edited
Sep 18, 2021
md`# 📑 Tf Practice 2`
data=d3.range(100).map(function(d) {
return {'y':d3.randomUniform(100)()}; })
function get_values(data) {
var values=[];
for (var i=0; i<100; i++){values.push(Math.floor(data[i]['y']*100)/100)};
return values.toString();}
get_values(data)
width_img=224
height_img=224
topK=5
getImg=function(file) {
const img=new Promise((resolve,reject)=>{
let image=new Image();
image.onload=()=>resolve(image); image.onerror=reject;
image.crossOrigin='anonymous';
image.src='https://raw.githubusercontent.com/'
.concat('OlgaBelitskaya/data/main/birds/').concat(file);
image.width=width_img; image.height=height_img;})
return img; }
img0=getImg('00_00_001.png')
img1=getImg('01_00_001.png')
img2=getImg('00_02_001.png')
tensor0=tf.browser.fromPixels(img0)
tensor1=tf.browser.fromPixels(img1)
tensor2=tf.browser.fromPixels(img2)
createImg=function(tensor) {
const [height,width]=tensor.shape;
const ctx=DOM.context2d(height,width);
const buffer=new Uint8ClampedArray(width*height*4)
const imageData=new ImageData(width,height);
const data=tensor.dataSync();
var i=0;
for(var y=0; y<height; y++) {
for(var x=0; x<width; x++) {
var pos=(y*width+x)*4;
buffer[pos ]=data[i]
buffer[pos+1]=data[i+1]
buffer[pos+2]=data[i+2]
buffer[pos+3]=255;
i+=3 } }
imageData.data.set(buffer)
ctx.putImageData(imageData,0,0);
return ctx.canvas; }
timg0=createImg(tensor0)
timg1=createImg(tensor1)
timg2=createImg(tensor2)
predict0=await mobilenet.classify(tensor0,topK)
predict1=await mobilenet.classify(tensor1,topK)
predict2=await mobilenet.classify(tensor2,topK)
mn_predictions=function(predictions) {
const text=predictions.map(prediction=>
prediction.probability.toFixed(3)+': '+prediction.className+'<br>');
const rows=predictions.map(prediction=> `
<div style='display:table-row; background:silver;'>
<div style='display:table-cell; width:300px; padding:2px'>
${prediction.className}</div>
<div style='display:table-cell; padding:2px; text-align:center;'>
${prediction.probability.toFixed(3)}</div>
<div style='display:table-cell; padding:2px; text-align:center;'>
${imagenetClassIdx[prediction.className]}</div>
</div>`);
return html`
<div style='display:table-row; font-weight:bold;
text-align:center; background:silver;'>
<div style='display:table-cell; border:double black;
padding:5px'>class</div>
<div style='display:table-cell; border:double black;
padding:5px'>probability</div>
<div style='display:table-cell; border:double black;
padding:5px'>imagenet class id</div>
</div>
${rows.join('')}`}
mn_predictions(predict0)
mn_predictions(predict1)
mn_predictions(predict2)
md`## Tools`
mobilenet=await mobilenetModule.load()
imagenetClassIdx={
const result={};
for (let i=0; i<1000; i++) {
const className=imagenetClasses[i+''];
result[className]=i; }
return result;}
mobilenetModule=await require('@tensorflow-models/mobilenet@0.2')
//mobilenetModule=await require('@tensorflow-models/mobilenet@2.0.4')
tf=await require('@tensorflow/tfjs@1.0.0')
d3=require('d3@6')
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.
