Skip to content

ID-154: Loss type selection #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AntoxaBarin merged 6 commits into from
Dec 14, 2023
Merged

ID-154: Loss type selection #70

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fb7de98
Add loss type selection
AntoxaBarin Nov 30, 2023
0e54ccc
Add loss type selection
AntoxaBarin Dec 10, 2023
afe3be1
Remove layer-class loss
AntoxaBarin Dec 10, 2023
7ea89d8
Clean up Loss type
AntoxaBarin Dec 14, 2023
67c1f76
Merge branch 'main' into task148_LossTypeSelection
AntoxaBarin Dec 14, 2023
8bdf27a
Make format
AntoxaBarin Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 95 additions & 29 deletions client/templates/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,10 @@ <h3></h3>
</div>
</div>

<div class="relu-layer-parameters layer-parameters" id="relu-layer-parameters" style="display: none">
<div class="relu-layer-parameters" id="relu-layer-parameters" style="display: none">
<label for="relu-width-parameter">Width</label>
<input id="relu-width-parameter" type="number" value="1" size="4" />
<h3></h3>
<div id="relu-input-selection">
<label class="layer-input-list" style="display: none">Input order: </label>
<ul id="relu-inputs-sortable-list"></ul>
Expand All @@ -196,6 +199,20 @@ <h3></h3>
<ul id="special-inputs-sortable-list"></ul>
</div>
</div>

<div class="loss-layer-parameters" id="loss-layer-parameters" style="display: none">
<label for="loss-width-parameter">Width</label>
<input id="loss-width-parameter" type="number" value="1" size="4" />
<h3></h3>
<label for="loss-type-parameter">Loss type</label>
<select id="loss-type-parameter">
<option value="MSELoss">MSELoss</option>
<option value="CrossEntropyLoss">CrossEntropyLoss</option>
</select>
<div id="loss-input-selection">
<ul id="loss-inputs-sortable-list"></ul>
</div>
</div>
</div>
</div>

Expand Down Expand Up @@ -562,7 +579,6 @@ <h3></h3>
linear_bias_selector.addEventListener("change", () => {
setModelView("irrelevant")
const parameters = getParametersFromNode(last_selected_node_id)
console.log("last id: " + last_selected_layer_id)
const new_value = document.getElementById("bias-parameter").value

for (i in parameters) {
Expand All @@ -584,7 +600,6 @@ <h3></h3>
linear_inFeatures_input.addEventListener("change", () => {
setModelView("irrelevant")
const parameters = getParametersFromNode(last_changed_parameters_layer_id)
console.log("last id: " + last_selected_layer_id)
const new_value = document.getElementById("linear-inFeatures-parameter").value

for (i in parameters) {
Expand All @@ -604,7 +619,6 @@ <h3></h3>
linear_outFeatures_input.addEventListener("change", () => {
setModelView("irrelevant")
const parameters = getParametersFromNode(last_changed_parameters_layer_id)
console.log("last id: " + last_selected_layer_id)
const new_value = document.getElementById("linear-outFeatures-parameter").value

for (i in parameters) {
Expand All @@ -624,7 +638,6 @@ <h3></h3>
special_width_input.addEventListener("change", () => {
setModelView("irrelevant")
const parameters = getParametersFromNode(last_changed_parameters_layer_id)
console.log("last id: " + last_selected_layer_id)
const new_value = document.getElementById("special-width-parameter").value

for (i in parameters) {
Expand All @@ -640,6 +653,21 @@ <h3></h3>
last_changed_parameters_layer_id = last_selected_node_id
})

const loss_type_selector = document.getElementById("loss-type-parameter")
loss_type_selector.addEventListener("change", () => {
setModelView("irrelevant")
const parameters = getParametersFromNode(last_selected_node_id)
const new_value = loss_type_selector.value

for (i in parameters) {
if (parameters[i][0] == "type") {
parameters[i][1] = new_value
joinUpdatedLayerParameters(parameters, last_selected_node_id)
break
}
}
})

/* DRAG EVENT */
/* Mouse and Touch Actions */
let elements = document.getElementsByClassName("drag-drawflow")
Expand Down Expand Up @@ -1142,13 +1170,16 @@ <h3></h3>
pathsWithWrittenID = []
}

function getSortableInputList(layerClass) {
switch (layerClass) {
function getSortableInputList(layer) {
switch (layer.class) {
case "linear":
return document.querySelector("#linear-inputs-sortable-list")
case "relu":
return document.querySelector("#relu-inputs-sortable-list")
case "special":
if (layer.name == "Loss") {
return document.querySelector("#loss-inputs-sortable-list")
}
Comment on lines 1179 to +1182
Copy link
Contributor

@Artem-Goldenberg Artem-Goldenberg Dec 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

А здесь layer.class нельзя сделать loss?

Copy link
Contributor Author

@AntoxaBarin AntoxaBarin Dec 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Я изначально так и сделал, но потом вернул обратно. Если бы я так и оставил класс loss, то надо было еще в нескольких методах дописывать условия всякие. Если раньше метод проверял, что класс слоя special (data, output, target, loss), то теперь ему бы пришлось проверять еще и класс loss.

return document.querySelector("#special-inputs-sortable-list")
}
}
Expand All @@ -1168,7 +1199,7 @@ <h3></h3>

// Input selection
writeIdOnConnections(correct_id)
let sortable_list = getSortableInputList(node.class)
let sortable_list = getSortableInputList(node)
let child = sortable_list.lastElementChild

while (child) {
Expand Down Expand Up @@ -1230,42 +1261,77 @@ <h3></h3>
})

document.getElementById("layer-data").style.display = "block"
document.getElementById("layer-id").innerHTML = "ID: " + layer_dbid.toString()
setupLayerParameters(node, correct_id)
}

const layer_parameters = getParametersFromNode(correct_id)
function setupLayerParameters(layer, layer_id) {
let layer_parameters = getParametersFromNode(layer_id)

if (node.class == "linear") {
document.querySelector("#linear-layer-parameters").style.display = "block"
switch (layer.class) {
case "linear":
document.querySelector("#linear-layer-parameters").style.display = "block"

for (i in layer_parameters) {
if (layer_parameters[i][0] == "bias") {
document.querySelector("#bias-parameter").value = layer_parameters[i][1] == "1"
}
if (layer_parameters[i][0] == "inFeatures") {
document.querySelector("#linear-inFeatures-parameter").value = layer_parameters[i][1]
for (i in layer_parameters) {
switch (layer_parameters[i][0]) {
case "bias":
document.querySelector("#bias-parameter").value = layer_parameters[i][1] == "1"
break
case "inFeatures":
document.querySelector("#linear-inFeatures-parameter").value = layer_parameters[i][1]
break
case "outFeatures":
document.querySelector("#linear-outFeatures-parameter").value = layer_parameters[i][1]
break
}
}
if (layer_parameters[i][0] == "outFeatures") {
document.querySelector("#linear-outFeatures-parameter").value = layer_parameters[i][1]
break

case "special":
if (layer.name == "Loss") {
document.querySelector("#loss-layer-parameters").style.display = "block"
for (i in layer_parameters) {
switch (layer_parameters[i][0]) {
case "width":
document.querySelector("#loss-width-parameter").value = layer_parameters[i][1]
break
case "type":
document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
break
}
}
} else {
document.querySelector("#special-layer-parameters").style.display = "block"
for (i in layer_parameters) {
switch (layer_parameters[i][0]) {
case "width":
document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
break
case "type":
document.querySelector("#loss-type-parameter").value = layer_parameters[i][1]
break
}
}
}
}
} else if (node.class == "special") {
document.querySelector("#special-layer-parameters").style.display = "block"
break

for (i in layer_parameters) {
if (layer_parameters[i][0] == "width") {
document.querySelector("#special-width-parameter").value = layer_parameters[i][1]
case "relu":
document.querySelector("#relu-layer-parameters").style.display = "block"
for (i in layer_parameters) {
if (layer_parameters[i][0] == "width") {
document.querySelector("#relu-width-parameter").value = layer_parameters[i][1]
}
}
}
} else if (node.class == "relu") {
document.querySelector("#relu-layer-parameters").style.display = "block"
break
}
}

function hideLayerInfo() {
document.getElementById("layer-data").style.display = "none"

document.querySelector("#linear-layer-parameters").style.display = "none"
document.querySelector("#special-layer-parameters").style.display = "none"
document.querySelector("#relu-layer-parameters").style.display = "none"
document.querySelector("#loss-layer-parameters").style.display = "none"

deleteIdOnConnections()
}
Expand Down