Commit 59cc62c2 authored by Petr Kubeš's avatar Petr Kubeš

add training set UI

parent aa962848
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -68,40 +68,18 @@
<div class="row">
<div class="col-4">
<h5>Training set input</h5>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<button type="button" class="btn btn-outline-primary btn-sm mt-3">Apply training data</button>
<textarea class="form-control" id="training-set-input" rows="3"></textarea>
<button type="button" class="btn btn-outline-primary btn-sm mt-3" onclick="setTrainingData()">Set training data</button>
</div>
<div class="col-8">
<h5>Training set</h5>
<div id="training-set-output"></div>
<table class="table table-sm table-bordered table-hover">
<table class="table table-sm table-bordered table-hover table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Neuron 1</th>
<th scope="col">Neuron 1</th>
<th scope="col">Neuron 1</th>
<tr id="training-set-neurons-output">
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tbody id="training-set-data-output">
</tbody>
</table>
</div>
......
......@@ -33,7 +33,7 @@ export class Visualizer {
public draw(neurons: Neuron[][], connections: Connection[][]) {
this.ctx.clearRect(0, 0, this.width, this.height);
const drawableNeurons: DrawableNeuron[] = [];
const leftMargin = this.width / (neurons.length + 1);
......@@ -89,12 +89,12 @@ export class Visualizer {
this.ctx.arc(drawableNeuron.x, drawableNeuron.y, 25, 0, 2 * Math.PI);
this.ctx.fillStyle = `rgb(255,255,255)`;
this.ctx.fill();
this.ctx.beginPath();
if (drawableNeuron.isBias)
this.ctx.fillStyle = `rgba(46,40,42, 1)`;
else
this.ctx.fillStyle = `rgba(23, 190, 187, ${drawableNeuron.activation})`;
this.ctx.fillStyle = `rgba(61, 232, 255, ${drawableNeuron.activation})`;
this.ctx.strokeStyle = `rgb(46,40,42, 1)`
this.ctx.lineWidth = 1;
this.ctx.arc(drawableNeuron.x, drawableNeuron.y, 25, 0, 2 * Math.PI);
......@@ -106,14 +106,14 @@ export class Visualizer {
this.ctx.font = `bold ${height}px serif`;
const text = Number(drawableNeuron.activation).toFixed(2);
this.ctx.fillText(
text,
drawableNeuron.x - this.ctx.measureText(text).width / 2,
text,
drawableNeuron.x - this.ctx.measureText(text).width / 2,
drawableNeuron.y + height / 3);
}
private drawConnection(inputNeuron: DrawableNeuron, outputNeuron: DrawableNeuron, weight: number) {
this.ctx.beginPath();
this.ctx.lineWidth = (weight > 0) ?
this.ctx.lineWidth = (weight > 0) ?
Math.log(weight) :
Math.log(-weight);
this.ctx.strokeStyle = (weight > 0) ?
......
import { Visualizer } from './Visualizer';
import { NeuralCore } from './neuralNetwork/NeuralCore';
import { Regularizations } from './neuralNetwork/HelperObjects';
import { Regularizations, TrainSample } from './neuralNetwork/HelperObjects';
(window as any).slide = (i: number, value: number) => {
input[i] = value;
......@@ -58,6 +58,20 @@ import { Regularizations } from './neuralNetwork/HelperObjects';
visualizer.draw(neuralCore.getNeurons(), neuralCore.getConnections());
}
(window as any).setTrainingData = () => {
try {
const dataArr = JSON.parse(trainingSetInput.value);
neuralCore.setTrainingSamples([]);
dataArr.forEach((sample) => {
neuralCore.addTrainingSet(sample[0], sample[1]);
});
updateUI();
} catch (err) {
alert(err);
}
}
(window as any).reset = () => {
neuralCore.reset();
neuralCore.evaluate(input);
......@@ -87,6 +101,10 @@ let itersInput: HTMLInputElement;
let regTypeInput: HTMLInputElement;
let regRateInput: HTMLInputElement;
let trainingSetLabelsOutput: HTMLElement;
let trainingSetDataOutput: HTMLElement;
let trainingSetInput: HTMLInputElement;
const main = () => {
const content: HTMLCanvasElement = document.getElementById('content') as HTMLCanvasElement;
inputControls = document.getElementById('input-controls');
......@@ -97,6 +115,9 @@ const main = () => {
itersInput = document.getElementById('iters-input') as HTMLInputElement;
regTypeInput = document.getElementById('regularization-type-input') as HTMLInputElement;
regRateInput = document.getElementById('regularization-rate-input') as HTMLInputElement;
trainingSetDataOutput = document.getElementById('training-set-data-output') as HTMLInputElement;
trainingSetLabelsOutput = document.getElementById('training-set-neurons-output') as HTMLInputElement;
trainingSetInput = document.getElementById('training-set-input') as HTMLInputElement;
visualizer = new Visualizer(content);
......@@ -160,6 +181,30 @@ const updateUI = () => {
iter.innerHTML = neuralCore.getIteration().toString();
cost.innerHTML = neuralCore.getCost().toString();
// Add training set data labels
let labels = '';
for (let i = 0; i < neuralCore.getInputSize(); i++) {
labels += `<th scope='col'>Input ${i}</th>`;
}
for (let i = 0; i < neuralCore.getOutputSize(); i++) {
labels += `<th scope='col' style="text-align: right">Output ${i}</th>`;
}
trainingSetLabelsOutput.innerHTML = labels;
// Add training data
let trainingData = '';
neuralCore.getTrainingSamples().forEach(sample => {
trainingData += '<tr>';
sample.input.forEach(val => {
trainingData += `<td>${val}</td>`;
});
sample.output.forEach(val => {
trainingData += `<td style="text-align: right">${val}</td>`;
});
trainingData += '</tr>';
});
trainingSetDataOutput.innerHTML = trainingData;
}
const addLayerControlRow = (label: string, size: string, onclickPos: string, onclickNeg: string): string => {
......
......@@ -3,7 +3,7 @@ import { Connection } from "./Connection";
export interface Activation {
der(x: number): number;
output(x: number): number;
}
};
export const SIGMOID: Activation = {
output: (x: number): number => 1 / (1 + Math.exp(-x)),
......
......@@ -379,4 +379,12 @@ export class NeuralCore {
public setRegularizationRate(rate: number) {
this.lambda = rate;
}
public getTrainingSamples() {
return this.trainSamples;
}
public setTrainingSamples(samples: TrainSample[]) {
this.trainSamples = samples;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment