I am trying to implement a structure search mechanism, find blocks and wrap them in a block.
I am new to machine learning, at first I started with the brain.js This library is quite simple and clear, I realized what was happening from the first time, the library is suitable for simple tasks.
But unfortunately, this library is not functional, earlier I asked how to find blocks: How to take the data?
I decided to try tensorflow, but for understanding this library is difficult, I still do not understand how it learns, because there is input and what the result should be.
Here is an example of how I tried to do a search for a brain.js
https://jsfiddle.net/eoy7krzj/
<html>
<head>
<script src="https://cdn.rawgit.com/BrainJS/brain.js/5797b875/browser.js"></script>
</head>
<body>
<div>
<button onclick="train()">train</button><button onclick="Generate.next(); Generate.draw();">generate</button><button onclick="calculate()">calculate</button>
</div>
<canvas id="generate" style="border: 1px solid #000"></canvas>
</body>
<script type="text/javascript">
var trainData = [];
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1)
//rand = Math.round(rand);
return rand;
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var Generate = new function(){
var canvas = document.getElementById('generate');
var ctx = canvas.getContext('2d');
var elem = {
input: [],
output: []
}
var size = {
width: 240,
height: 140
}
canvas.width = 500;
canvas.height = 250;
this.next = function(){
this.build();
trainData.push({
input: elem.input,
output: elem.output
});
}
this.clear = function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
this.draw = function(){
this.clear();
this.item(elem.input, function(item){
ctx.strokeStyle = "green";
ctx.strokeRect(item[0], item[1], item[2], item[3]);
})
this.item(elem.output, function(item){
ctx.strokeStyle = "blue";
ctx.strokeRect(item[0], item[1], item[2], item[3]);
})
}
this.item = function(where, call){
for (var i = 0; i < where.length; i+=4) {
var input = [
where[i],
where[i+1],
where[i+2],
where[i+3],
];
this.denormalize(input);
call(input)
}
}
this.normalize = function(input){
input[0] = input[0] / 500;
input[1] = input[1] / 250;
input[2] = input[2] / 500;
input[3] = input[3] / 250;
}
this.denormalize = function(input){
input[0] = input[0] * 500;
input[1] = input[1] * 250;
input[2] = input[2] * 500;
input[3] = input[3] * 250;
}
this.empty = function(add){
var data = [];
for (var i = 0; i < add; i++) {
data = data.concat([0,0,0,0]);
}
return data;
}
this.build = function(){
var output = [];
var input = [];
size.width = randomInteger(100,500);
size.height = randomInteger(50,250);
var lines = 1;//Math.round(size.height / 100);
var line_size = 0;
var line_offset = 0;
for(var i = 0; i < lines; i++){
line_size = randomInteger(30,Math.round(size.height / lines));
var columns = Math.round(randomInteger(1,3));
var columns_width = 0;
var columns_offset = 0;
for(var c = 0; c < columns; c++){
columns_width = randomInteger(30,Math.round(size.width / columns));
var item = [
columns_offset + 10,
line_offset + 10,
columns_width - 20,
line_size - 20
];
this.normalize(item);
input = input.concat(item);
columns_offset += columns_width;
}
var box = [
0,
line_offset,
columns_offset,
line_size
]
this.normalize(box);
output = output.concat(box);
line_offset += line_size + 10;
}
elem.input = input.concat(this.empty(5 - Math.round(input.length / 4)));
elem.output = output.concat(this.empty(2 - Math.round(output.length / 4)));
}
this.get = function(){
return elem.input;
}
this.calculate = function(result, stat){
console.log('brain:',result);
this.item(result, function(item){
ctx.strokeStyle = "red";
ctx.strokeRect(item[0], item[1], item[2], item[3]);
})
}
this.train = function(){
for(var i = 0; i < 1400; i++){
this.next();
}
}
}
Generate.train();
Generate.log = true;
var net,stat;
function train(){
net = new brain.NeuralNetwork({ hiddenLayers: [4],activation: 'tanh'});
stat = net.train(trainData,{log: true, iterations: 1250,learningRate: 0.0001,errorThresh:0.0005});
console.log('stat:',stat)
}
function calculate(){
Generate.calculate(net.run(Generate.get()))
}
</script>
</html>
My goal is to train the network to find the elements and show their sizes.
Procedure: Click to train Click generate Click to calculate
The blue block wraps the green blocks, this should be the result, the red block shows that it has found a neural network.
That's what interests me:
Can tensorflow find blocks?
The data should be in the form of pictures, or numerical data?
How do you advise to start?
I would be very grateful if someone would put a small example on how to receive data, in what format and how to train)
Edit
I give the size and position of the green blocks, the goal is to find where the green blocks are and their total size, as an example this is shown by the blue block.
Neural Network
The neural network has a fix input that are the number of green blocks. Lets suppose we are going to find 3 blocks in a picture. The model will have an InputShape of [3, 4] for each block has 4 coordinates (x, y, w, h). The predicted box can be the min(x), min(y), max(x+w), max(y+h). This bounding box will wrap the boxes.
A sample data can be
features = [[[1, 2, 3, 4], [2, 4, 5, 6], [3, 4, 2, 2]]]
labels = [[1, 2, 7, 10]]
const random = _ => Math.floor(Math.random()*100)
const generate = _ => {
xarr = Array.from({length: 3}, _ => random())
yarr = Array.from({length: 3}, _ => random())
features = xarr.map((x, i) => ([x, yarr[i], x + random(), yarr[i] + random()]))
labels = features.reduce((acc, f) => ([Math.min(acc[0], f[0]), Math.min(acc[1], f[1]), Math.max(acc[0] + acc[2], f[0] + f[2]), Math.max(acc[0] + acc[3], f[1] + f[3])]) )
return {features, labels}
}
(async () => {
const model = tf.sequential();
model.add(tf.layers.dense({units: 20, inputShape: [3, 4], activation: 'relu'}));
model.add(tf.layers.reshape({targetShape: [60]}));
model.add(tf.layers.dense({units: 4, activation: 'relu'}));
model.summary();
// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'adam'});
// Generate some synthetic data for training.
let x = [];
let y = [];
for (let i = 0; i < 5; i++) {
const data = generate();
x.push(data.features);
y.push(data.labels);
}
const xs = tf.tensor3d(x);
const ys = tf.tensor2d(y);
console.log(xs.shape);
console.log(ys.shape);
// Train the model using the data then do inference on a data point the
// model hasn't seen:
xs.print()
ys.print()
await model.fit(xs, ys, {epochs: 100});
model.predict(tf.tensor([[[1, 2, 3, 4], [2, 4, 5, 6], [3, 4, 2, 2]]])).print();
})();
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#latest"> </script>
</head>
<body>
</body>
</html>
Convolutionnal filters
The previous model will generate boxes that wraps up boxes whose coordinates are given to the model. But if we are to find out which position are the matching boxes, one can use a convolution filter.
Let's suppose we want to match the following data [[1, 2], [5, 6]] in a tensor.
This data can be a cropped picture that we want to see if it exists or not in a big picture and if yes, how many times it appears. Using a convolution filter of [[1, 1], [1, 1]], we will have a result of 14 at the top left coordinates (x, y) where there is a match. Filtering over this value (14) will return the index of the coordinates of interest.
(async() => {
// tf.setBackend('cpu')
const arr = Array.from({length: 16}, (_, k) => k+1)
const x = tf.tensor([...arr, ...arr.reverse()], [8, 4]); // input image 2d
x.print()
const filter = tf.ones([2, 2]) // input filter 2d
const conv = x.reshape([1, ...x.shape, 1]).conv2d(filter.reshape([...filter.shape, 1, 1]), 1, 'same').squeeze()
conv.print() // conv
const part = tf.tensor([[1, 2], [5, 6]]) // searched tensor
const mask = conv.equal(part.sum()).asType('bool');
const coords = await tf.whereAsync(mask);
coords.print(); // (0, 0) and (4, 0) are the top left coordinates of part of x that matches the part tensor
// how many elements matches
console.log(coords.shape[0])
// filter coords
const [a, b] = coords.lessEqual(x.shape.map((a, i) => a - part.shape[i] )).split(2, 1); // because of padding 'same'
const filterMask = a.mul(b)
const filterCoords = await tf.whereAsync(filterMask);
filterCoords.print()
const newCoords = coords.gather(filterCoords.split(2, 1)[0].reshape([2]))
newCoords.print()
const matchIndexes = await newCoords.unstack().reduce(async (a, c) => {
const cropped = x.slice(await c.data(), part.shape)
const sameElements = (await tf.whereAsync(cropped.equal(part).asType('bool')))
if(tf.util.sizeFromShape(part.shape) * 2 === (await sameElements.data()).length) {
a.push(await c.data())
}
return a
}, [])
console.log('matching index', matchIndexes) // only [0, 0]
})()
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#latest"> </script>
</head>
<body>
</body>
</html>
To be more thorough, the convolutional filters is not enough to tell if there is a match. Actually a part of the tensor with the following values [[5, 6], [2, 1]] will also output 14. To make sure of outputting only the correct index, one can slice the input tensor at the given coordinates and check values bitwise if possible when the tensor processed are not big or just randomly some few elements.
Related
I am trying to learn how to do simple convolution. I only want to see whether this matrix can detect v lines in images. Like in wikipedia.
This is my MWE
import * as tf from "#tensorflow/tfjs-node"
import { readFile, writeFile } from "node:fs/promises"
async function mainModule() {
const img = tf.node.decodeImage(await readFile("./numberOneGreyColor.png"), 1) as tf.Tensor3D;
const tensor4d = tf.tensor4d(
[-1, 2, -1,
-1, 2, -1,
-1, 2, -1,
], [1, 1, 3, 3])
.cast("float32")
.div(6)
const result = img.div(255).conv2d(
tensor4d as tf.Tensor4d, 1, "same") as tf.Tensor3D
const data = await tf.node.encodePng(result)
await writeFile("./result.png", data)
}
mainModule()
Which I wrote mostly by eye, so I appreciate some corrections.
Can not get this going. Any help?
I think finally got it.
This is original image
And the code:
import * as tf from "#tensorflow/tfjs-node"
import { tensor3d } from "#tensorflow/tfjs-node"
import { readFile, writeFile } from "node:fs/promises"
async function mainModule() {
let img = tf.node.decodeImage(await readFile("./images.png"), 1)
const tensor4d = tf.tensor4d([-1, 2, -1,
-1, 2, -1,
-1, 2, -1,
], [3, 3, 1, 1]).cast("float32")
const result = img.div(255).conv2d(tensor4d.div(6) as tf.Tensor4D, 1, "same")
const data = await tf.node.encodePng(result.abs().mul(255))
await writeFile("./result.png", data)
}
mainModule()
And the result
Not fully sure why is so dark but should inspect it later. Similar result in wikipedia by the way.
I have a model.json generated from tensorflow via tensorflow.js coverter
In the original implementation of model in tensorflow in python, it is built like this:
model = models.Sequential([
base_model,
layers.Dropout(0.2),
layers.Flatten(),
layers.Dense(128, activation='relu'),
layers.Dense(num_classes)
])
In tensorflow, the probability can be generated by score = tf.nn.softmax(predictions[0]), according to the tutorial on official website.
How do I get this probability in tensorflow.js?
I have copied the codes template as below:
$("#predict-button").click(async function () {
if (!modelLoaded) { alert("The model must be loaded first"); return; }
if (!imageLoaded) { alert("Please select an image first"); return; }
let image = $('#selected-image').get(0);
// Pre-process the image
console.log( "Loading image..." );
let tensor = tf.browser.fromPixels(image, 3)
.resizeNearestNeighbor([224, 224]) // change the image size
.expandDims()
.toFloat()
// RGB -> BGR
let predictions = await model.predict(tensor).data();
console.log(predictions);
let top5 = Array.from(predictions)
.map(function (p, i) { // this is Array.map
return {
probability: p,
className: TARGET_CLASSES[i] // we are selecting the value from the obj
};
}).sort(function (a, b) {
return b.probability - a.probability;
}).slice(0, 2);
console.log(top5);
$("#prediction-list").empty();
top5.forEach(function (p) {
$("#prediction-list").append(`<li>${p.className}: ${p.probability.toFixed(6)}</li>`);
});
How should I modify the above code?
The output is just the same as the value of variable 'predictions':
Float32Array(5)
0: -2.5525975227355957
1: 7.398464679718018
2: -3.252196788787842
3: 4.710395812988281
4: -4.636396408081055
buffer: (...)
byteLength: (...)
byteOffset: (...)
length: (...)
Symbol(Symbol.toStringTag): (...)
__proto__: TypedArray
0: {probability: 7.398464679718018, className: "Sunflower"}
1: {probability: 4.710395812988281, className: "Rose"}
length: 2
__proto__: Array(0)
Please help!!!
Thanks!
In order to extract the probabilities from the logits of the model using a softmax function you can do the following:
This is the array of logits that are also the predictions you get from the model
const logits = [-2.5525975227355957, 7.398464679718018, -3.252196788787842, 4.710395812988281, -4.636396408081055]
You can call tf.softmax() on the array of values
const probabilities = tf.softmax(logits)
Result:
[0.0000446, 0.9362511, 0.0000222, 0.0636765, 0.0000056]
Then if you wanted to get the index with the highest probability you can make use of tf.argMax():
const results = tf.argMax(probabilities).dataSync()[0]
Result:
1
Edit
I am not too familiar with jQuery so this might not be correct. But here is how I would get the probabilities of the outputs in descending order:
let probabilities = tf.softmax(predictions).dataSync();
$("#prediction-list").empty();
probabilities.forEach(function(p, i) {
$("#prediction-list").append(
`<li>${TARGET_CLASSES[i]}: ${p.toFixed(6)}</li>`
);
});
Need help with D3.js I have a half-donut component which receives 2 values a value variable and a threshold variable I need to place a cutting arc on the half donut based on the threshold value which is between 0 and 1 where 1 is 100%.
The half-donut component what I have .
The dashed line I need is above.
The code below will do this. Later I will add the link to the tutorial.
import * as d3 from 'd3';
import { attrs } from 'd3-selection-multi'
let btn = d3.select('body').append('button').text('Change data')
.style('margin-bottom', '10px')
let dim = { 'width': 700, 'height': 400 }
let svg = d3.select('body').append('svg').attrs(dim)
.style('border', '1px solid black')
let g = svg.append('g').attr('transform', 'translate(350, 370)')
let arcGen = d3.arc()
arcGen.innerRadius(250).outerRadius(340)
let pth = arcGen({
startAngle: -Math.PI / 2,
endAngle: Math.PI / 2
})
let scale = d3.scaleLinear([0, 1], [-Math.PI / 2, Math.PI / 2])
let data = [Math.random(), Math.random()]
g.append('path').attrs({
'd': pth,
'fill': 'lightgray',
'stroke': 'black'
})
svg.append('clipPath').attr('id', 'mask')
.append('path').attr('d', pth)
let valuePth = arcGen({
startAngle: -Math.PI / 2,
endAngle: scale(data[0])
})
let value = g.append('path').attrs({
'd': valuePth,
'fill': data[0] < data[1]? 'aquamarine': 'lightcoral',
'stroke': 'black'
})
// target line
let pts = d3.pointRadial(scale(data[1]), 0).concat(d3.pointRadial(scale(data[1]), 1000))
let target = g.append('line').attrs({
'x1': pts[0], 'y1': pts[1], 'x2': pts[2], 'y2': pts[3],
'stroke': 'midnightblue',
'stroke-width': 4,
'stroke-dasharray': '6, 3',
'clip-path': 'url(#mask)'
})
btn.on('click', ()=>{
let oldAngle = scale(data[0])
data = [Math.random(), Math.random()]
pts = d3.pointRadial(scale(data[1]), 0).concat(d3.pointRadial(scale(data[1]), 1000))
value.transition().duration(2000).attrTween('d', ()=>{
let start = {startAngle: -Math.PI / 2, endAngle: oldAngle}
let interpolate = d3.interpolate(start, {startAngle: -Math.PI / 2, endAngle: scale(data[0])})
return (t)=>arcGen(interpolate(t))
}).attr('fill', data[0] < data[1]? 'aquamarine': 'lightcoral')
target.transition().duration(2000).attrs({
'x1': pts[0], 'y1': pts[1], 'x2': pts[2], 'y2': pts[3]
})
})
I trained my model using Keras in Python and I converted my model to a tfjs model to use it in my webapp. I also wrote a small prediction script in python to validate my model on unseen data. In python it works perfectly, but when I'm trying to predict in my webapp it goes wrong.
This is the code I use in Python to create tensors and predict based on these created tensors:
input_dict = {name: tf.convert_to_tensor([value]) for name, value in sample_v.items()}
predictions = model.predict(input_dict)
classes = predictions.argmax(axis=-1)
In TFJS however it seems I can't pass a dict (or object) to the predict function, but if I write code to convert it to a tensor array (like I found on some places online), it still doesn't seem to work.
Object.keys(input).forEach((k) => {
input[k] = tensor1d([input[k]]);
});
console.log(Object.values(input));
const prediction = await model.executeAsync(Object.values(input));
console.log(prediction);
If I do the above, I get the following error: The shape of dict['key_1'] provided in model.execute(dict) must be [-1,1], but was [1]
If I then convert it to this code:
const input = { ...track.audioFeatures };
Object.keys(input).forEach((k) => {
input[k] = tensor2d([input[k]], [1, 1]);
});
console.log(Object.values(input));
I get the error that some dtypes have to be int32 but are float32. No problem, I can set the dtype manually:
const input = { ...track.audioFeatures };
Object.keys(input).forEach((k) => {
if (k === 'int_key') {
input[k] = tensor2d([input[k]], [1, 1], 'int32');
} else {
input[k] = tensor2d([input[k]], [1, 1]);
}
});
console.log(Object.values(input));
I still get the same error, but if I print it, I can see the datatype is set to int32.
I'm really confused as to why this is and why I can't just do like python and just put a dict (or object) in TFJS, and how to fix the issues I'm having.
Edit 1: Complete Prediction Snippet
const model = await loadModel();
const input = { ...track.audioFeatures };
Object.keys(input).forEach((k) => {
if (k === 'time_signature') {
input[k] = tensor2d([parseInt(input[k], 10)], [1, 1], 'int32');
} else {
input[k] = tensor2d([input[k]], [1, 1]);
}
});
console.log(Object.values(input));
const prediction = model.predict(Object.values(input));
console.log(prediction);
Edit 2: added full errormessage
I am trying to make a simple project to find coefficients of an equation using a tensorflow.js model. however, when ran, the loss approaches infinity and becomes NaN withing 4 or so iterations. I don't know why this is happening. Here is my code:
let xs = [];
let ys = [];
let aReal = Math.random();
let bReal = Math.random();
let cReal = Math.random();
let dReal = Math.random();
for (let i = -100; i < 100; i+=1) {
xs.push(i);
ys.push((aReal*Math.pow(i, 3) + bReal*Math.pow(i, 2) + cReal*i + dReal) + Math.random()*10-1);
}
const a = tf.variable(tf.scalar(Math.random()));
const b = tf.variable(tf.scalar(Math.random()));
const c = tf.variable(tf.scalar(Math.random()));
const d = tf.variable(tf.scalar(Math.random()));
function predict(x) {
return tf.tidy(() => {
return a.mul(x.pow(tf.scalar(3, 'int32')))
.add(b.mul(x.square()))
.add(c.mul(x))
.add(d);
});
}
function loss(predictions, labels) {
const meanSquareError = predictions.sub(labels).square().mean();
print(meanSquareError.dataSync());
return meanSquareError;
}
function train(xS, yS, numIterations) {
const learningRate = 0.1;
const optimizer = tf.train.sgd(learningRate);
console.log(xS.dataSync(), yS.dataSync());
for (let iter = 0; iter < numIterations; iter++) {
optimizer.minimize(() => {
const predYs = predict(xS);
return loss(predYs, yS);
});
}
}
train(tf.tensor(xs), tf.tensor(ys), 100);
let yPred = predict(tf.tensor(xs)).dataSync();
console.log(yPred);
let trace1 = {
x: xs,
y: ys,
mode: 'markers',
type: 'scatter'
};
let trace2 = {
x: xs,
y: yPred,
mode: 'lines',
};
console.log(aReal, bReal, cReal, dReal);
console.log(a.dataSync(), b.dataSync(), c.dataSync(), d.dataSync());
let graphData = [trace1, trace2];
Plotly.newPlot('graph', graphData);
Plotly is just a js library I'm using to plot the data.
Try lowering your learning rate. Once it's stable you can tweak it back up to speed training. If it's too high you'll get instability and NaNs
const learningRate = 0.0001;
You should try to normalize your input data for the prediction to work correctly. Otherwise the optimization becomes numerically unstable.
ys = [...];
// compute mean and stdev for ys!
normalized = (ys-ysmean)/(ysstd);
train(xs, normalized);
normed_pred = predict(xs);
pred = ysstd*normed_pred+ysmean;
In the tests I ran, your code works perfect on linear models y=ax+b; therefore my conclusion.
The loss depends on the values you start with, so if they are too big the loss may jump to the infinite and the prediction will return NaN. Try normalizing them so that they scale between 1 and -1. For instance when you train on MNIST, you divide all the values by 255, meaning that some white pixel [255, 255, 255] will become [1., 1., 1.].