Skip to content

Commit

Permalink
improved demo and documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Eduardo Leao authored and Eduardo Leao committed Jul 27, 2024
1 parent 2a9810b commit 69ff5c6
Show file tree
Hide file tree
Showing 71 changed files with 11,472 additions and 4,930 deletions.
22 changes: 20 additions & 2 deletions assets/demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,15 @@ h2 {

label {
display: block;
margin-bottom: 5px;
margin-bottom: 3px;
font-weight: bold;
}

input[type="number"],
input[type="text"] {
width: 50%;
padding: 8px;
margin-bottom: 10px;
margin-bottom: 6px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
Expand Down Expand Up @@ -216,6 +216,24 @@ input {
color:#1b1b1b;
}

#device-showcase {
margin-left: 50px;
font-size: 16px;
color:#1b1b1b;
}

#epoch {
margin-left: 50px;
font-size: 16px;
color:#1b1b1b;
}

#acc {
margin-left: 50px;
font-size: 16px;
color:#1b1b1b;
}

ul {
display: inline-block;
width: 50%;
Expand Down
88 changes: 52 additions & 36 deletions assets/demo/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@
</div>

<div class="separator" id="right-separator" style="margin-top: 10px; display: block;">
<p style="display: block; font-size: 16px; color: #292929; margin-bottom: 25px;">Welcome to <b>JS-PyTorch's Web Demo</b>! You can choose the <b>Model Hyperparameters</b> on the left, set the <b>Model Layers</b> on the right (number of layers and hidden dimension on each). </p>
<p style="display: block; font-size: 16px; color: #292929; margin-bottom: 25px;">Welcome to <b>JS-PyTorch's Web Demo</b>! You can set the <b>Model Layers</b> on the right (number of layers and hidden dimension of each layer), and choose the <b>Model Hyperparameters</b> in <u>real time</u>. </p>
<div id="mnist-and-list">
<ul>
<li>This model was trained on <b>MNIST</b>, using <b>2000</b> training images. </li>
<li>This model was trained on <b>MNIST</b>, using <b>2000</b> training and <b>100</b> validation images. </li>
<br>
<li>The images have a dimension of <b>28x28</b>. </li>
<br>
Expand All @@ -55,10 +55,10 @@ <h2 style="display: inline-block; margin-left: 20px; margin-top: 2px; margin-bot
<div class="separator" id="left-separator">

<label for="batch-size">Batch Size:</label>
<input type="number" id="batch-size" name="batch-size" min="1" value="32" max="256" onchange="checkInput(this)">
<input type="number" id="batch-size" name="batch-size" min="1" value="32">

<label for="learning-rate">Learning Rate:</label>
<input type="number" id="learning-rate" name="learning-rate" step="0.00001" min="0" value="0.0005" required>
<input type="number" id="learning-rate" name="learning-rate" step="0.00001" min="0" value="0.0001" required>

<label for="regularization">L2 Regularization:</label>
<input type="number" id="regularization" name="regularization" step="0.001" min="0" value="0.001">
Expand Down Expand Up @@ -94,12 +94,13 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model
<div class="container" style="padding-bottom: 0px;">
<h2>Graph</h2>
<!-- This is where the graph will be displayed -->
<canvas id="graph" width="700" height="350"></canvas>
<canvas id="graph" width="700" height="300"></canvas>
<div style="display: inline-block; width: 90%; margin-bottom: 15px;">
<p id="loss"> <b>Validation Loss:</b> </p>
<p id="acc"> <b>Validation Accuracy:</b> </p>
<p id="iter"> <b>Iteration:</b> </p>
<p id="total-visited"> <b>Total Training Examples:</b> </p>
<p id="loss"> <b>Loss:</b> </p>
<p id="epoch"> <b>Epoch:</b> </p>
<p id="total-visited"> <b>Total Training Examples:</b> </p>
<p id="device-showcase"> <b>Device:</b> </p>
</div>
<divs tyle="display: inline-block;">
Expand All @@ -118,6 +119,7 @@ <h2>Graph</h2>
let iter = 0;
let total_visited = 0;
let device = 'cpu';
let smoothAcc = 0.1;

function GPUCaller() {
if (!training) {
Expand Down Expand Up @@ -152,7 +154,6 @@ <h2>Graph</h2>
inputField.type = 'number';
// The next Box has as many neurons as last current Box:
inputField.value = boxCount[boxCount.length -1] || '64';
inputField.max = '256';
inputField.idx = boxCount.length;
inputField.id = `box-input`;
inputField.onchange = function() {
Expand All @@ -173,18 +174,9 @@ <h2>Graph</h2>
};

function changeDim(el, boxCount) {
if (el.value > 256) {
el.value = 256;
};
boxCount[el.idx] = Number(el.value);
};

function checkInput(el){
if (el.value > 256) {
el.value = 256;
};
}

function getBatch(data, batch_size) {
// Instantiate x_batch and y_batch as empty tensors:
let x_batch = [];
Expand Down Expand Up @@ -249,9 +241,7 @@ <h2>Graph</h2>
this.relu4 = new torch.nn.ReLU();
};
this.wOut = new torch.nn.Linear(boxCount[boxCount.length-1], 10, device);

this.softmax = new torch.nn.Softmax();


};

forward(x) {
Expand All @@ -273,8 +263,7 @@ <h2>Graph</h2>
z = this.relu4.forward(z);
};
z = this.wOut.forward(z);
z = z.div(10);
z = this.softmax.forward(z);
z = z.div(100);

return z;
};
Expand All @@ -296,6 +285,7 @@ <h2>Graph</h2>
// Build optimizer:
let optimizer = new torch.optim.Adam(model.parameters(), lr=lr, reg=reg, betas=[beta1, beta2], eps=eps)
let loss;
let loss_test;

// Training Loop:
for(let i=0 ; i < 1 ; i++) {
Expand All @@ -321,8 +311,10 @@ <h2>Graph</h2>
// Run the batch of test data through the model:
let z_test = model.forward(x_test)

// Get the test loss:
// Get the test loss and accuracy:
acc_test = getAccuracy(z_test, y_test)
loss_test = loss_func.forward(z_test, y_test)
smoothAcc = acc_test * 0.02 + smoothAcc * 0.98

// If loss went to infinity (model way too large for training size), represent that in the graph:
if (isNaN(loss_test.data[0])) {
Expand All @@ -334,23 +326,44 @@ <h2>Graph</h2>
// Display iteration and loss on the screen:
document.getElementById('iter').innerHTML = `<b>Iteration:</b> ${iter}`;
document.getElementById('total-visited').innerHTML = `<b>Total Training Examples:</b> ${total_visited}`;
document.getElementById('loss').innerHTML = `<b>Loss:</b> ${loss_test.data[0].toFixed(3)}`;
document.getElementById('loss').innerHTML = `<b>Validation Loss:</b> ${loss_test.data[0].toFixed(3)}`;
document.getElementById('device-showcase').innerHTML = `<b>Device:</b> ${device}`
document.getElementById('epoch').innerHTML = `<b>Epoch:</b> ${Math.floor(total_visited/train.length)}`;
document.getElementById('acc').innerHTML = `<b>Validation Accuracy:</b> ${smoothAcc.toFixed(3)}`;
iter += 1;
total_visited += batch_size;

plotGraph()

optimizer.zero_grad()
};
};

function getAccuracy(z, y) {
const [B, D] = z.shape;
let acc = 0;
for (let i = 0; i < B; i+=1) {
let biggest = 0;
let biggestIndex = 0;
for (let j = 0; j < D; j+=1) {
if (z.data[i][j] > biggest) {
biggestIndex = j;
biggest = z.data[i][j];
}
}
if (biggestIndex === y.data[i]) {acc += 1}
}
return acc / B
}

function pauseTraining() {
in_loop = false;
};

function resetTraining() {
in_loop = false;
training = false;
smoothAcc = 0.1;
iter = 0;
total_visited = 0;
data = [];
Expand All @@ -372,11 +385,11 @@ <h2>Graph</h2>
ctx.clearRect(0, 0, canvas.width, canvas.height);

var startX = 50;
var startY = canvas.height - 50;
var startY = canvas.height - 30;
var maxX = data.length - 1;
var maxY = Math.max(...data);
var stepX = (canvas.width - 2 * startX) / maxX;
var stepY = (startY - 50) / maxY;
var stepY = (startY - 30) / maxY;

// Set default stroke style and line width
ctx.strokeStyle = 'black';
Expand All @@ -386,7 +399,7 @@ <h2>Graph</h2>
ctx.fillStyle = 'black';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.fillText('Iterations', canvas.width / 2, startY + 40);
ctx.fillText('Iterations', canvas.width / 2, startY +15);

// Draw y-axis label
ctx.save();
Expand All @@ -395,13 +408,13 @@ <h2>Graph</h2>
ctx.fillStyle = 'black';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.fillText('Cross-Entropy Loss', 0, 0);
ctx.fillText('Cross-Entropy Loss', 0, 5);
ctx.restore();

// Draw grid lines
ctx.beginPath();
for (var i = 1; i < maxY; i += 1) {
var y = startY - i * stepY;
for (var i = 1; i < 5; i += 1) {
var y = (startY * i )/ 5
ctx.moveTo(startX, y);
ctx.lineTo(canvas.width - startX, y);
};
Expand All @@ -416,7 +429,7 @@ <h2>Graph</h2>
// Draw y-axis
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX, 50);
ctx.lineTo(startX, 30);
ctx.stroke();

// Draw ticks and labels on x-axis
Expand All @@ -430,13 +443,16 @@ <h2>Graph</h2>
};

// Draw ticks and labels on y-axis
for (var i = 0; i <= maxY; i += 1) {
var y = startY - i * stepY;
for (var i = 0; i < 4; i += 1) {
var y = (startY * i) / 5 + startY/5;
ctx.beginPath();
ctx.moveTo(startX, y);
ctx.lineTo(startX - 5, y);
ctx.lineTo(startX - 5, y );
ctx.stroke();
ctx.fillText((i * (maxY / 4)).toFixed(2), startX - 30, y + 5);
if (stepY != 0) {
ctx.fillText((y * maxY / stepY * 2 / 5).toFixed(2), startX - 20, startY - (y) + 5 );
}

};

// Draw line plot
Expand All @@ -454,7 +470,7 @@ <h2>Graph</h2>

// Initial setup
addBox(); // Add one box initially
setInterval(changeMNIST , 1000);
setInterval(changeMNIST , 1200);
</script>
</body>

Expand Down
7 changes: 7 additions & 0 deletions assets/demo/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1871,6 +1871,13 @@ class CrossEntropyLoss extends Module {
const logits = logitsExp.div(logitsSum);
const y_array = _reshape(y.data, [B]);
const at_logits = logits.at([...Array(B).keys()], y_array);
// const myz = torch.tensor(z.data,false)
// console.log('logits')
// console.log(at_logits.data)
// const softmax = new torch.nn.Softmax()
// const mylogits2 = softmax.forward(myz).at([...Array(B).keys()], y_array);
// console.log('>>.>>>>>')
// console.log(mylogits2.data)
const log_losses = log(at_logits);
let loss = log_losses.sum(-1).neg();
loss = loss.div(B);
Expand Down
Binary file added docs/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 0 additions & 7 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
<a href="https://www.github.com/eduardoleao052/js-pytorch">
<img src="https://img.shields.io/badge/GitHub-%23121011.svg?style=flat-square&logo=github&logoColor=white">
</a>
<a href="https://www.linkedin.com/in/eduardoleao052/">
<img src="https://img.shields.io/badge/-LinkedIn-blue?style=flat-square&logo=linkedin">
</a>

# Welcome to JS-Pytorch's documentation

For access to the source code, visit <a href="https://github.com/eduardoleao052", target="_blank">The GitHub repo</a>.
Expand Down
Loading

0 comments on commit 69ff5c6

Please sign in to comment.