Skip to content

Commit

Permalink
Better Fix: Codec Class (Encoder-Decoder), controls encoding processe…
Browse files Browse the repository at this point in the history 
…s of all data. Uses training data as reference.
  • Loading branch information
@izzat5233
izzat5233 committed Dec 25, 2023
1 parent 5e827d7 commit cc56042
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 156 deletions.
2 changes: 1 addition & 1 deletion web/content/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ expanded = false
- Now that your neural network is configured, let’s put it to the test. Upload your data, train the network, and then
evaluate its performance.

{{< include-script "js/TableObject.js" >}}
{{< include-script "js/Codec.js" >}}
{{< include-script "js/table.js" >}}
{{< accordion "control" >}}

Expand Down
123 changes: 66 additions & 57 deletions web/content/control/data.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,50 @@
<script>
const trainInputTableObject = new TableObject();
const trainOutputTableObject = new TableObject();
const testInputTableObject = new TableObject();
const testOutputTableObject = new TableObject();
const inputCodec = new Codec();
const outputCodec = new Codec();

let trainInputData = [];
let trainOutputData = [];
let testInputData = [];
let testOutputData = [];

function setInputCodec() {
inputCodec.use(trainInputData, getEncodingType(), "Input");
}

function setOutputCodec() {
outputCodec.use(trainOutputData, getEncodingType(), "Output");
}

function setTrainInput() {
const arrArr = trainInputTableObject.getEncodedData();
setInputCodec();
const arrArr = inputCodec.encode(trainInputData);
network.setTrainInput(toVecVecNum(arrArr));
}

function setTrainOutput() {
const arrArr = trainOutputTableObject.getEncodedData();
setOutputCodec();
const arrArr = outputCodec.encode(trainOutputData);
network.setTrainOutput(toVecVecNum(arrArr));
}

function setTestInput() {
const arrArr = trainInputTableObject.encodeData(testInputTableObject.data);
setInputCodec();
const arrArr = inputCodec.encode(testInputData);
network.setTestInput(toVecVecNum(arrArr));
}

function setTestOutput() {
const arrArr = trainOutputTableObject.encodeData(testOutputTableObject.data);
setOutputCodec();
const arrArr = outputCodec.encode(testOutputData);
network.setTestOutput(toVecVecNum(arrArr));
}

function setAll() {
setTrainInput();
setTrainOutput();
setTestInput();
setTestOutput();
}
</script>
<div class="row">
<div class="col">
Expand All @@ -31,7 +53,7 @@
Data is always encoded if categorical columns are detected.</span>
</p>
<div class="px-2 d-flex flex-column gap-2">
<div onchange="handleDataEncodingOptionChange()">
<div onchange="setAll()">
<div class="form-check">
<input class="form-check-input" type="radio" name="dataEncodingRadio"
id="dataEncodingRadioLabelOption" checked>
Expand All @@ -56,17 +78,9 @@
</div>
</div>
<script>
function handleDataEncodingOptionChange() {
function getEncodingType() {
const isLabelEncoding = document.getElementById('dataEncodingRadioLabelOption').checked;
const value = isLabelEncoding ? 'label' : 'oneHot';
trainInputTableObject.reset(value);
trainOutputTableObject.reset(value);
testInputTableObject.reset(value);
testOutputTableObject.reset(value);
handleTrainInputClear();
handleTrainOutputClear();
handleTestInputClear();
handleTestOutputClear();
return isLabelEncoding ? 'label' : 'oneHot';
}
</script>
</div>
Expand Down Expand Up @@ -96,14 +110,13 @@
async function handleLoadDataset(dataset) {
const read = async (set, name) =>
readTextFilePath("datasets/" + set + "/" + name + ".csv").then(csvToArrArr);
trainInputTableObject.setDataAndHeaders(await read(dataset, "train_in"), "Input");
trainOutputTableObject.setDataAndHeaders(await read(dataset, "train_out"), "Output");
testInputTableObject.setDataAndHeaders(await read(dataset, "test_in"), "Input");
testOutputTableObject.setDataAndHeaders(await read(dataset, "test_out"), "Output");
setTrainInput();
setTrainOutput();
setTestInput();
setTestOutput();
[trainInputData, trainOutputData, testInputData, testOutputData] = await Promise.all([
read(dataset, "train_in"),
read(dataset, "train_out"),
read(dataset, "test_in"),
read(dataset, "test_out")
]);
setAll();
}
</script>
</div>
Expand Down Expand Up @@ -138,17 +151,16 @@ <h5>Training Data</h5>
</div>
<script>
async function handleTrainInputUpload(fileInput) {
const data = await handleTextFileUpload(fileInput).then(csvToArrArr);
trainInputTableObject.setDataAndHeaders(data, "Input");
trainInputData = await handleTextFileUpload(fileInput).then(csvToArrArr);
setTrainInput();
}

function onTrainInputSet() {
const btn = document.getElementById('trainInputFileButton');
activateFileInputButton(btn, "Train Input Loaded", trainInputTableObject.data.length);
activateFileInputButton(btn, "Train Input Loaded", trainInputData.length);
document.getElementById('trainInputClearButton').disabled = false;
document.getElementById('trainInputDownloadButton').disabled = false;
setInputHeight(trainInputTableObject.getEncodedData()[0].length);
setInputHeight(inputCodec.getHeaders(true).length);
previewTrainTable();
}

Expand All @@ -157,7 +169,8 @@ <h5>Training Data</h5>
}

function onTrainInputCleared() {
trainInputTableObject.clear();
inputCodec.clear();
trainInputData = [];
const btn = document.getElementById('trainInputFileButton');
deactivateFileInputButton(btn, "Browse Input File");
document.getElementById('trainInputClearButton').disabled = true;
Expand All @@ -166,8 +179,7 @@ <h5>Training Data</h5>
}

function handleTrainInputDownload() {
const arrArr = trainInputTableObject.data;
const csvString = arrArrToCsv(arrArr);
const csvString = arrArrToCsv(trainInputData);
downloadCSV(csvString, "train_input.csv");
}
</script>
Expand All @@ -186,17 +198,16 @@ <h5>Training Data</h5>
</div>
<script>
async function handleTrainOutputUpload(fileInput) {
const data = await handleTextFileUpload(fileInput).then(csvToArrArr);
trainOutputTableObject.setDataAndHeaders(data, "Output");
trainOutputData = await handleTextFileUpload(fileInput).then(csvToArrArr);
setTrainOutput();
}

function onTrainOutputSet() {
const btn = document.getElementById('trainOutputFileButton');
activateFileInputButton(btn, "Train Output Loaded", trainOutputTableObject.data.length);
activateFileInputButton(btn, "Train Output Loaded", trainOutputData.length);
document.getElementById('trainOutputClearButton').disabled = false;
document.getElementById('trainOutputDownloadButton').disabled = false;
setOutputHeight(trainOutputTableObject.getEncodedData()[0].length);
setOutputHeight(outputCodec.getHeaders(true).length);
previewTrainTable();
}

Expand All @@ -205,7 +216,8 @@ <h5>Training Data</h5>
}

function onTrainOutputCleared() {
trainOutputTableObject.clear();
outputCodec.clear();
testOutputData = [];
const btn = document.getElementById('trainOutputFileButton');
deactivateFileInputButton(btn, "Browse Output File");
document.getElementById('trainOutputClearButton').disabled = true;
Expand All @@ -214,8 +226,7 @@ <h5>Training Data</h5>
}

function handleTrainOutputDownload() {
const arrArr = trainOutputTableObject.data;
const csvString = arrArrToCsv(arrArr);
const csvString = arrArrToCsv(trainOutputData);
downloadCSV(csvString, "train_output.csv");
}
</script>
Expand All @@ -233,12 +244,14 @@ <h5>Training Data</h5>
document.getElementById('trainPreviewTbody').innerHTML = '';
const encoded = !document.getElementById('dataOriginalDataCheck').checked;

const input = trainInputTableObject.getPreviewData(encoded);
const input = inputCodec.get(encoded, trainInputData, false);
input.data = sampleArrArr(input.data);
const h1 = appendTableHeaders("#trainPreviewThead", input.headers);
const b1 = appendTableCells("#trainPreviewTbody", input.data);
styleTableSelection(h1, b1, 'table-default');

const output = trainOutputTableObject.getPreviewData(encoded);
const output = outputCodec.get(encoded, trainOutputData, false);
output.data = sampleArrArr(output.data);
const h2 = appendTableHeaders("#trainPreviewThead", output.headers);
const b2 = appendTableCells("#trainPreviewTbody", output.data);
styleTableSelection(h2, b2, 'table-secondary');
Expand All @@ -262,14 +275,13 @@ <h5>Testing Data</h5>
</div>
<script>
async function handleTestInputUpload(fileInput) {
const data = await handleTextFileUpload(fileInput).then(csvToArrArr);
testInputTableObject.setDataAndHeaders(data, "Input");
testInputData = await handleTextFileUpload(fileInput).then(csvToArrArr);
setTestInput();
}

function onTestInputSet() {
const btn = document.getElementById('testInputFileButton');
activateFileInputButton(btn, "Test Input Loaded", testInputTableObject.data.length);
activateFileInputButton(btn, "Test Input Loaded", testInputData.length);
document.getElementById('testInputClearButton').disabled = false;
document.getElementById('testInputDownloadButton').disabled = false;
previewTestTable();
Expand All @@ -280,7 +292,7 @@ <h5>Testing Data</h5>
}

function onTestInputCleared() {
testInputTableObject.clear();
testInputData = [];
const btn = document.getElementById('testInputFileButton');
deactivateFileInputButton(btn, "Browse Input File");
document.getElementById('testInputClearButton').disabled = true;
Expand All @@ -289,8 +301,7 @@ <h5>Testing Data</h5>
}

function handleTestInputDownload() {
const arrArr = testInputTableObject.data;
const csvString = arrArrToCsv(arrArr);
const csvString = arrArrToCsv(testInputData);
downloadCSV(csvString, "test_input.csv");
}
</script>
Expand All @@ -309,14 +320,13 @@ <h5>Testing Data</h5>
</div>
<script>
async function handleTestOutputUpload(fileInput) {
const data = await handleTextFileUpload(fileInput).then(csvToArrArr);
testOutputTableObject.setDataAndHeaders(data, "Output");
testOutputData = await handleTextFileUpload(fileInput).then(csvToArrArr);
setTestOutput();
}

function onTestOutputSet() {
const btn = document.getElementById('testOutputFileButton');
activateFileInputButton(btn, "Test Output Loaded", testOutputTableObject.data.length);
activateFileInputButton(btn, "Test Output Loaded", testOutputData.length);
document.getElementById('testOutputClearButton').disabled = false;
document.getElementById('testOutputDownloadButton').disabled = false;
previewTestTable();
Expand All @@ -327,7 +337,7 @@ <h5>Testing Data</h5>
}

function onTestOutputCleared() {
testOutputTableObject.clear();
testOutputData = [];
const btn = document.getElementById('testOutputFileButton');
deactivateFileInputButton(btn, "Browse Output File");
document.getElementById('testOutputClearButton').disabled = true;
Expand All @@ -336,8 +346,7 @@ <h5>Testing Data</h5>
}

function handleTestOutputDownload() {
const arrArr = testOutputTableObject.data;
const csvString = arrArrToCsv(arrArr);
const csvString = arrArrToCsv(testOutputData);
downloadCSV(csvString, "test_output.csv");
}
</script>
Expand All @@ -355,13 +364,13 @@ <h5>Testing Data</h5>
document.getElementById('testPreviewTbody').innerHTML = '';
const encoded = !document.getElementById('dataOriginalDataCheck').checked;

const input = trainInputTableObject.prepareSimilarData(encoded, testInputTableObject.data, false);
const input = inputCodec.get(encoded, testInputData, false);
input.data = sampleArrArr(input.data);
const h1 = appendTableHeaders("#testPreviewThead", input.headers);
const b1 = appendTableCells("#testPreviewTbody", input.data);
styleTableSelection(h1, b1, 'table-default');

const output = trainOutputTableObject.prepareSimilarData(encoded, testOutputTableObject.data, false);
const output = outputCodec.get(encoded, testOutputData, false);
output.data = sampleArrArr(output.data);
const h2 = appendTableHeaders("#testPreviewThead", output.headers);
const b2 = appendTableCells("#testPreviewTbody", output.data);
Expand Down
12 changes: 6 additions & 6 deletions web/content/control/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ <h5>Custom Test</h5>
function handleCustomTest() {
handleCustomTestClear();
const data = csvToArrArr(document.getElementById('customTestInput').value);
const encodedData = trainInputTableObject.encodeData(data);
const encodedData = inputCodec.encode(data);
const encodedPredictions = toArrArr(network.getCustomPredictions(toVecVecNum(encodedData)));

const encoded = !document.getElementById('testDecodeDataCheck').checked;
const thead = "#customPredictedThead";
const tbody = "#customPredictedTbody";

let predictions = trainOutputTableObject.prepareSimilarData(encoded, encodedPredictions);
let predictions = outputCodec.get(encoded, encodedPredictions, true);
const h = appendTableHeaders(thead, predictions.headers);
const b = appendTableCells(tbody, predictions.data);
styleTableSelection(h, b, 'table-primary');
Expand Down Expand Up @@ -95,7 +95,7 @@ <h5>Custom Test</h5>
</div>
<script>
function getDecodedPredictions() {
return testOutputTableObject.decodeData(predictionsEncodedData);
return outputCodec.decode(predictionsEncodedData, false);
}

function handleClearPredictions() {
Expand Down Expand Up @@ -135,20 +135,20 @@ <h5>Custom Test</h5>
const tbody = "#predictedTbody";

if (document.getElementById('testInputDataCheck').checked) {
const input = trainInputTableObject.prepareSimilarData(encoded, testInputTableObject.data, false);
const input = inputCodec.get(encoded, testInputData, false);
input.data = sampleArrArr(input.data);
const h1 = appendTableHeaders(thead, input.headers);
const b1 = appendTableCells(tbody, input.data);
styleTableSelection(h1, b1, 'table-default');
}

const output = trainOutputTableObject.prepareSimilarData(encoded, testOutputTableObject.data, false);
const output = outputCodec.get(encoded, testOutputData, false);
output.data = sampleArrArr(output.data);
const h2 = appendTableHeaders(thead, output.headers);
const b2 = appendTableCells(tbody, output.data);
styleTableSelection(h2, b2, 'table-secondary');

let predictions = trainOutputTableObject.prepareSimilarData(encoded, predictionsEncodedData);
let predictions = outputCodec.get(encoded, predictionsEncodedData, true, false);
predictions.data = sampleArrArr(predictions.data);
const h3 = appendTableHeaders(thead, predictions.headers);
const b3 = appendTableCells(tbody, predictions.data);
Expand Down
Loading

0 comments on commit cc56042

Please sign in to comment.