-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
diff --git a/js/Draw/Layer/BaseLayers/LayerView.js b/js/Draw/Layer/BaseLayers/LayerView.js
index a2fd936..94d9e57 100644
--- a/js/Draw/Layer/BaseLayers/LayerView.js
+++ b/js/Draw/Layer/BaseLayers/LayerView.js
@@ -1,6 +1,5 @@
class LayerView extends Draggable {
- constructor(_x, _y, w, h) {
- const { x, y } = iManager.getAbsoluteCoordinates(_x, _y);
+ constructor(x, y, w, h) {
super(x, y, w, h);
this.neurons = [];
this.yGap = 50;
diff --git a/js/Draw/Layer/InputLayer.js b/js/Draw/Layer/InputLayer.js
index bba3cd8..9811933 100644
--- a/js/Draw/Layer/InputLayer.js
+++ b/js/Draw/Layer/InputLayer.js
@@ -27,7 +27,6 @@ class InputLayer extends IOLayer {
super.initialize();
}
- // FIXME: probably need merge with parent class
handleRemove() {
const isMultiDim = this.outputDot.theme == "black";
if (!isMultiDim) return super.handleRemove();
diff --git a/js/Draw/MLP/MLPView.js b/js/Draw/MLP/MLPView.js
index c9e5acf..75d1f05 100644
--- a/js/Draw/MLP/MLPView.js
+++ b/js/Draw/MLP/MLPView.js
@@ -374,39 +374,26 @@ class MlpView extends Playable {
return { totalParams, stepCounter, epoch };
}
- getTrainCommands() {
- const x = this.x + 5;
- const y = this.y + this.h;
- const { lr, momentum, batchSize } = this.getProps();
- const { stepCounter, epoch } = this.getOriginProps();
- const commands = [
- {
- func: "text",
- args: [
- `Step: ${stepCounter} - ${this.msPerStepText}\nEpoch: ${epoch}\nBatch Size: ${batchSize}\nLearning Rate: ${lr}\nMomentum: ${momentum}`,
- x,
- y + 15,
- ],
- },
- ];
-
- return commands;
- }
-
showProps() {
- const { errFunc } = this.getProps();
- const { totalParams } = this.getOriginProps();
+ const { lr, momentum, batchSize, errFunc } = this.getProps();
+ const { totalParams, stepCounter, epoch } = this.getOriginProps();
+ const commonText = `Step: ${stepCounter} - ${this.msPerStepText}\nEpoch: ${epoch}\nBatch Size: ${batchSize}\n`;
+ let a = this.isEval()
+ ? "Mode: Eval"
+ : `Learning Rate: ${lr}\nMomentum: ${momentum}`;
const x = this.x + 5;
const y = this.y + this.h;
- const common = [
+ const commands = [
{ func: "text", args: [errFunc, x + this.w - 35, y - 10] },
{ func: "text", args: [`Total Parameters: ${totalParams}\n`, x, y - 10] },
+ { func: "text", args: [commonText, x, y + 15] },
+ { func: "noStroke", args: [] },
+ { func: "fill", args: [themeManager.getTheme("blue").activeColor] },
+ { func: "text", args: [a, x, y + 60] },
];
- const commands = this.isEval() ? [] : this.getTrainCommands();
-
- executeDrawingCommands([...commands, ...common]);
+ executeDrawingCommands(commands);
}
show() {
diff --git a/js/HandWritten/DigitOutput.js b/js/HandWritten/DigitOutput.js
index fc86ee1..caf5d5f 100644
--- a/js/HandWritten/DigitOutput.js
+++ b/js/HandWritten/DigitOutput.js
@@ -38,7 +38,6 @@ class DigitOutput extends Component {
});
}
- // FIXME: maybe we can merge those functions into a base class for output
fetchNext() {}
connectLayer(targetLayer) {
diff --git a/js/HandWritten/Flatter.js b/js/HandWritten/Flatter.js
index c73a5f3..6c07f29 100644
--- a/js/HandWritten/Flatter.js
+++ b/js/HandWritten/Flatter.js
@@ -56,7 +56,6 @@ class Flatter extends Component {
}
handleRemove() {
- // FIXME: add variable to control if component isoleted and ready to remove
if (!(this.source || this.connected)) {
this.destroy();
mainOrganizer.removeComponent(this);
diff --git a/js/Managers/errorFunctionManager.js b/js/Managers/errorFunctionManager.js
index ee3a6d7..2ebfc10 100644
--- a/js/Managers/errorFunctionManager.js
+++ b/js/Managers/errorFunctionManager.js
@@ -4,6 +4,7 @@ class ErrorFunctionManager {
mse: this.mse,
mae: this.mae,
bce: this.bce,
+ categorical: this.categorical, // Add categorical here
};
const selectElement = getElementById("err-function-select");
diff --git a/js/Organizers/Table/tableOrganizer.js b/js/Organizers/Table/tableOrganizer.js
index 6de9d42..448f6c8 100644
--- a/js/Organizers/Table/tableOrganizer.js
+++ b/js/Organizers/Table/tableOrganizer.js
@@ -246,9 +246,9 @@ class TableOrganizer extends FunctionalTable {
async function loadXData() {
const allXData = [];
+ const totalFileNum = type == "train" ? 10 : 2;
- // FIXME: change 10 to how many files there is
- for (let chunkNumber = 1; chunkNumber <= 10; chunkNumber++) {
+ for (let chunkNumber = 1; chunkNumber <= totalFileNum; chunkNumber++) {
try {
const module = await import(
`../../../Data/mnist/${type}/xData/chunk_${chunkNumber}.js`
diff --git a/js/Organizers/datasetOrganizer.js b/js/Organizers/datasetOrganizer.js
index c957538..7d7ea62 100644
--- a/js/Organizers/datasetOrganizer.js
+++ b/js/Organizers/datasetOrganizer.js
@@ -12,7 +12,7 @@ class DatasetOrganizer {
mainOrganizer.addComponent(new InputLayer(id));
mainOrganizer.addComponent(new OutputLayer(id));
};
- btn.classList.add("btn", "btn-gray");
+ btn.classList.add("btn", "btn-cyan");
}
addDataset(dataset) {
diff --git a/js/Organizers/mainOrganizer.js b/js/Organizers/mainOrganizer.js
index db87559..7ffbb48 100644
--- a/js/Organizers/mainOrganizer.js
+++ b/js/Organizers/mainOrganizer.js
@@ -35,11 +35,6 @@ class MainOrganizer {
this.images = {
brokenLink: p.loadImage("media/broken-link.png"),
delete: p.loadImage("media/delete-icon.png"),
- lock: p.loadImage("media/lock.png"),
- lockOpen: p.loadImage("media/lock-open.png"),
- goOnce: p.loadImage("media/goOnce.png"),
- play: p.loadImage("media/play.png"),
- pause: p.loadImage("media/pause.png"),
zoomIn: p.loadImage("media/zoom-in.png"),
zoomOut: p.loadImage("media/zoom-out.png"),
};
diff --git a/js/draggable.js b/js/draggable.js
index fc982a0..665dcdb 100644
--- a/js/draggable.js
+++ b/js/draggable.js
@@ -1,5 +1,6 @@
class Draggable {
- constructor(x, y, w, h) {
+ constructor(_x, _y, w, h) {
+ const { x, y } = iManager.getAbsoluteCoordinates(_x, _y);
this.x = x;
this.y = y;
this.w = w;
diff --git a/js/script.js b/js/script.js
index 234af24..81a5f20 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,20 +1,25 @@
document.addEventListener("contextmenu", (event) => event.preventDefault());
-function createHandWrittenInput() {
- mainOrganizer.addComponent(new DigitInput(100, 0));
+function createHandWritten() {
+ mainOrganizer.addComponent(new DigitInput(400, 100));
mainOrganizer.addComponent(new DigitOutput(800, 100));
}
function createFlatter() {
- mainOrganizer.addComponent(new Flatter(100, 100));
+ mainOrganizer.addComponent(new Flatter(400, 100));
}
function createLayer() {
return new HiddenLayer(300, 500);
}
-function logMLPs() {
- console.log(mainOrganizer.mlpViews);
+async function importHandwrittenModel() {
+ try {
+ const module = await import(`../Models/HandwrittenMlp.js`);
+ importMLP(module.default);
+ } catch (error) {
+ console.error("Error loading yData:", error);
+ }
}
function openCreateDataset() {
@@ -25,9 +30,8 @@ function closeCreateDataset() {
tableOrganizer.disable();
}
-function toggleDatasetsContainer() {
- getElementById("datasets-container").classList.toggle("active");
- getElementById("toggle-dataset-btn").classList.toggle("active");
+function toggleDrawer() {
+ getElementById("drawer").classList.toggle("active");
}
function toggleWelcome() {
diff --git a/media/github.svg b/media/github.svg
new file mode 100644
index 0000000..015bc98
--- /dev/null
+++ b/media/github.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/media/githubLogo.png b/media/githubLogo.png
deleted file mode 100644
index 4d5cbcf..0000000
Binary files a/media/githubLogo.png and /dev/null differ
diff --git a/media/goOnce.png b/media/goOnce.png
deleted file mode 100644
index 307dd1e..0000000
Binary files a/media/goOnce.png and /dev/null differ
diff --git a/media/lock-open.png b/media/lock-open.png
deleted file mode 100644
index eacb6fe..0000000
Binary files a/media/lock-open.png and /dev/null differ
diff --git a/media/lock.png b/media/lock.png
deleted file mode 100644
index cf20ae6..0000000
Binary files a/media/lock.png and /dev/null differ
diff --git a/media/pause.png b/media/pause.png
deleted file mode 100644
index 3a81993..0000000
Binary files a/media/pause.png and /dev/null differ
diff --git a/media/play.png b/media/play.png
deleted file mode 100644
index 3a71403..0000000
Binary files a/media/play.png and /dev/null differ
diff --git a/media/tag.png b/media/tag.png
deleted file mode 100644
index 558809d..0000000
Binary files a/media/tag.png and /dev/null differ
diff --git a/media/tip.png b/media/tip.png
deleted file mode 100644
index a74effe..0000000
Binary files a/media/tip.png and /dev/null differ
diff --git a/media/tip.svg b/media/tip.svg
new file mode 100644
index 0000000..bf064b9
--- /dev/null
+++ b/media/tip.svg
@@ -0,0 +1 @@
+
diff --git a/style.css b/style.css
index 7691888..bb09165 100644
--- a/style.css
+++ b/style.css
@@ -12,9 +12,14 @@
--white: #ffffff;
--white-active: #e6e6e6;
--gray: #6b7280;
- --dark-gray: #4A4A4A;
+ --gray-active: #4A4A4A;
+ --light-gray: #f2f2f2;
--sky: #4A90E2;
- --sky-active: #1C64F2
+ --sky-active: #1C64F2;
+ --purple: #8e44ad;
+ --purple-active: #5e3384;
+ --orange: #e67e22;
+ --orange-active: #d35400;
}
#github-icon {
@@ -39,6 +44,10 @@
color: var(--green-active);
}
+.pointer {
+ cursor: pointer;
+}
+
#popup-container {
position: relative;
max-width: 500px;
@@ -68,16 +77,6 @@
z-index: 98;
}
-#tip-button {
- width: 50px;
- height: 50px;
- position: absolute;
- right: 0;
- bottom: 0;
- margin: 10px;
- cursor: pointer
-}
-
#demo-img {
width: 90%;
height: 100%;
@@ -90,7 +89,6 @@ body {
}
-
#disable-background {
position: absolute;
justify-content: center;
@@ -159,12 +157,12 @@ body {
border-radius: 10px;
top: 2%;
z-index: 1;
- left: -300px;
- transition: left 0.3s cubic-bezier(.68, -0.55, .27, 1.55);
+ right: -500px;
+ transition: right 0.4s cubic-bezier(.68, -0.55, .27, 1.55);
}
#mlp-edit-container.active {
- left: 0;
+ right: 0;
}
#mlp-edit-container input[type="number"] {
@@ -182,8 +180,6 @@ body {
outline: none;
}
-
-
#edit-layer-close,
#mlp-layer-close {
position: absolute;
@@ -237,7 +233,6 @@ body {
animation: spinner 0.8s linear infinite;
}
-
@keyframes spinner {
0% {
transform: rotate(0deg);
@@ -317,6 +312,30 @@ body {
background-color: var(--gray);
}
+.btn-gray:hover,
+.btn-gray:active {
+ background-color: var(--gray-active);
+}
+
+
+.btn-purple {
+ background-color: var(--purple);
+}
+
+.btn-purple:hover,
+.btn-purple:active {
+ background-color: var(--purple-active);
+}
+
+.btn-orange {
+ background-color: var(--orange);
+}
+
+.btn-orange:hover,
+.btn-orange:active {
+ background-color: var(--orange-active);
+}
+
.editCanvas {
position: absolute;
left: 0;
@@ -355,7 +374,6 @@ body {
position: absolute;
}
-
.clear-line-btn {
width: 50px;
height: 20px;
@@ -376,94 +394,77 @@ body {
justify-content: end;
}
-
.flex-between {
display: flex;
justify-content: space-between;
align-items: center
}
-.control-container {
- position: absolute;
- bottom: 0;
- margin: 5px;
- width: 200px;
- text-align: center;
- display: flex;
- flex-direction: column;
- border-radius: 10px;
- overflow: hidden;
-}
-
.gap-10 {
gap: 10px
}
-
-#datasets-container {
+#drawer {
+ position: absolute;
+ left: -200px;
+ width: 200px;
+ height: 100%;
display: flex;
- flex-direction: column;
+ gap: 10px;
box-sizing: border-box;
- background-color: var(--white-active);
- height: 0;
- transition: height 0.5s ease;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
+ padding: 10px;
+ padding-bottom: 50px;
+ flex-direction: column;
+ background-color: var(--light-gray);
+ box-shadow: 0px 1px 10px #999;
+ transition: left 0.3s cubic-bezier(.68, -0.55, .27, 1.55);
}
-#datasets-container.active {
- height: 350px;
+#drawer.active {
+ left: 0
}
-#datasets-container div:first-child {
- padding: 10px;
- background: var(--dark-gray);
- color: var(--white);
- font-weight: 700;
- border-top-right-radius: 10px;
- border-top-left-radius: 10px;
+#toggle-drawer {
+ position: absolute;
+ right: -35px;
+ top: 50%;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 100%;
+ box-shadow: 0px 1px 10px #999;
+ transform: rotate(-90deg);
+ background-color: var(--white);
}
-#datasets-container button {
- border-radius: 0px;
+
+#header {
+ text-align: center;
+ font-size: 1em;
+ margin: 5px 5px;
+ border-bottom: 1px solid black;
}
#dataset-scrollable {
width: 100%;
flex: 1;
- max-height: 300px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 10px;
box-sizing: border-box;
padding: 10px;
-
-}
-
-#add-layer {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
}
-#toggle-dataset-container {
+#footer {
+ position: absolute;
+ left: 0;
+ bottom: 0;
width: 100%;
- text-align: center;
-}
-
-#toggle-dataset-btn {
- width: 15px;
- height: 15px;
- cursor: pointer;
- padding: 5px;
- margin-bottom: 5px;
- margin-top: 10px;
- border-radius: 100%;
- box-shadow: 0px 1px 10px #999;
- transition: transform 0.5s ease;
- background-color: var(--white)
-}
-
-#toggle-dataset-btn.active {
- transform: rotate(-180deg);
+ height: 40px;
+ background-color: var(--gray-active);
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
}
- 
-
+ 