Skip to content

Commit

Permalink
added memory to demo
Browse files Browse the repository at this point in the history
  • Loading branch information
Eduardo Leao authored and Eduardo Leao committed Aug 1, 2024
1 parent a8b9543 commit c51c9a4
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 20 deletions.
16 changes: 14 additions & 2 deletions site/demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ label {
}

.torch-button {
padding: 10px 20px;
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: #fff;
Expand Down Expand Up @@ -135,10 +135,22 @@ label {
background-color: #821414;
}

#clear-button {
background-color: #818181;
}

#clear-button:hover {
background-color: #5f5f5f;
}

#clear-button:active {
background-color: #3a3a3a;
}

.device-button {
width: 10%;
background-color: #818181;
padding-right: 20px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 16px;
Expand Down
55 changes: 37 additions & 18 deletions site/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,7 @@ <h2 style="display: inline-block; margin-left: 20px; margin-top: 6.5px; margin-b
<div>
<h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model Layers</h2>
<button class="torch-button" class='layer-button' onclick="addBox()">+</button>
<button class="torch-button" class='layer-button' onclick="removeBox()">-</button>
<button class="torch-button" class='layer-button' onclick="removeBox()" style="padding: 10px 17.3px;"> - </button>
<div class="separator" id="layersBox">

</div>
Expand All @@ -575,6 +575,7 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model
<button class="torch-button" id="start-button" onclick="trainLoopInitializer()">Train</button>
<button class="torch-button" id="stop-button" onclick="pauseTraining()">Pause</button>
<button class="torch-button" id="reset-button" onclick="resetTraining()">Reset</button>
<button class="torch-button" id="clear-button" onclick="clearTraining()">Clear</button>
<div style="width: 25px; display: inline-block;"></div>
<button id="cpu-trigger" class="device-button" onclick="CPUCaller()">CPU</button>
<button id="gpu-trigger" class="device-button" onclick="GPUCaller()">GPU</button>
Expand All @@ -600,7 +601,7 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model
<script src="./gpu-browser.min.js"></script>
<script>
let boxCount = [];
let data = [];
let data = [[-Math.log(0.1)]];
let training = false;
let in_loop = true;
let overFlow = 1;
Expand Down Expand Up @@ -807,10 +808,9 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model
// If loss went to infinity (model way too large for training size), represent that in the graph:
if (isNaN(loss_test.data[0])) {
overFlow = overFlow * 1.5;
data.push(overFlow + (Math.random() - 0.5) * 15);
data[data.length - 1].push(overFlow + (Math.random() - 0.5) * 15);
// If not, just keep adding the loss to the graph:
} else {data.push(loss_test.data)}

} else {data[data.length - 1].push(loss_test.data[0])}
// 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}`;
Expand Down Expand Up @@ -854,7 +854,7 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model
smoothAcc = 0.1;
iter = 0;
total_visited = 0;
data = [];
data.push([]);
plotGraph();
buttons = document.getElementsByClassName('layer-button');
for (button of buttons) {
Expand All @@ -866,6 +866,12 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model
button.style.backgroundColor = '';
}
};

function clearTraining() {
resetTraining();
data = [[-Math.log(0.1)]];
plotGraph()
};

function plotGraph() {
var canvas = document.getElementById('graph');
Expand All @@ -874,8 +880,17 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model

var startX = 50;
var startY = canvas.height - 30;
var maxX = data.length - 1;
var maxY = Math.max(...data);
maxLength = 0;
maxY = 0;
for (arr of data) {
if (arr.length > maxLength) {
maxLength = arr.length;
}
if (Math.max(...arr) > maxY) {
maxY = Math.max(...arr);
}
}
var maxX = maxLength - 1;
var stepX = (canvas.width - 2 * startX) / maxX;
var stepY = (startY - 30) / maxY;

Expand Down Expand Up @@ -943,17 +958,21 @@ <h2 style="display: inline-block; margin-right: 15px; margin-left: 20px;">Model

};

const colors = ['red', 'orange','gold','lime', 'green', 'blue', 'purple', 'black']

// Draw line plot
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.moveTo(startX, startY - data[0] * stepY);
for (var i = 1; i <= maxX; i++) {
var x = startX + i * stepX;
var y = startY - data[i] * stepY;
ctx.lineTo(x, y);
};
ctx.stroke();
for (let idx = 0; idx < data.length; idx += 1) {
ctx.beginPath();
ctx.strokeStyle = colors[idx];
ctx.lineWidth = 2;
ctx.moveTo(startX, startY - data[idx][0] * stepY);
for (var i = 1; i <= maxX; i++) {
var x = startX + i * stepX;
var y = startY - data[idx][i] * stepY;
ctx.lineTo(x, y);
};
ctx.stroke();
}
};

// Initial setup
Expand Down

0 comments on commit c51c9a4

Please sign in to comment.