-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (122 loc) · 5.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<!--
NN Inspector Application - HTML
Author: Fraser King
Date: November, 2024
Description: This is the main HTML file for the NN Inspector application, which visualizes
neural network architectures and provides an interface for interactive adjustments and analysis.
Dependencies: D3.js v6, CSS (style.css), JavaScript (script.js)
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This is the main HTML file for the NN Inspector application, which visualizes
neural network architectures and provides an interface for interactive adjustments and analysis.">
<meta name="keywords" content="neural network, interactive, interpretability, interpretable, MLP, perceptron, toy models, machine learning">
<meta name="author" content="Fraser King">
<title>NN Inspector</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<div id="header">
<a href="https://frasertheking.com/nn_app/" style='text-decoration: none;'><div class="header-title">🔎 NN Inspector</div></a>
<div class="header-links">
<a href="https://github.com/frasertheking/Inspector" target="_blank">How to Use</a>
<a href="https://frasertheking.com/nn_app/about.html">About</a>
<a href="mailto:kingfr@umich.edu" target="_blank">Contact</a>
</div>
<!-- <button class="header-button" onclick="handleButtonClick()">Swap Models</button> -->
<div class="header-buttons-container">
<a href="#"><button id="classifier-button" class="header-button-classifier">🎯 Classifier</button></a>
<a href="#"><button id="regressor-button" class="header-button-regressor">📈 Regressor</button></a>
</div>
</div>
<div id="controls">
<div class="control-section">
<div id="mode-selection">
<label for="mode-select">Mode:</label>
<select id="mode-select">
<option value="training" selected>Training</option>
<option value="testing">Testing</option>
</select>
</div>
<button id="model-info-button">Info</button>
</div>
<div id="model-info-modal" style="display: none;">
<div id="model-info-content">
<h3>Model Hyperparameters</h3>
<div id="hyperparameters"></div>
<button id="close-model-info">Close</button>
</div>
</div>
<div id="training-controls" class="control-section">
<button id="play-pause-button">Play</button>
<button id="step-button">Step</button>
<button id="restart-button">Restart</button>
</div>
<div id="testing-controls" class="control-section" style="display: none;">
<button id="custom-test-button">Custom Test</button>
<button id="lrp-button">Activate LRP</button>
</div>
<div id="input-selection" class="control-section">
<button id="toggle-inputs-button">Select Inputs</button>
<div id="input-options" class="collapsible-content">
<form autocomplete="off" id="input-form">
</form>
</div>
</div>
<div id="neuron-selection" class="control-section">
<label>Neurons:</label>
<button id="minus-button">-</button>
<span id="neuron-count">4</span>
<button id="plus-button">+</button>
</div>
<div id="toggle-weights" class="control-section">
<label><input type="checkbox" id="show-weights-checkbox"> Weights</label>
<label><input type="checkbox" id="regularization-checkbox"> L1 </label>
</div>
</div>
<div id="custom-test-modal" style="display:none;">
<div id="custom-test-content">
<center>
<h3>Enter Custom Test Case Values</h3>
<form id="custom-test-form"></form>
<br />
<button id="custom-test-submit">Submit</button>
<button id="custom-test-cancel">Cancel</button>
</center>
</div>
</div>
<div id="epoch-text">Loading...</div>
<div id="main-content">
<div id="network">
</div>
<div id="plots">
<div id="loss-plot" class="plot">
</div>
<div id="accuracy-plot" class="plot">
</div>
<div id="activation-heatmap" class="plot" style="display: none;">
</div>
<div id="activation-sparsity" class="plot" style="display: none;">
</div>
<div id="scatter-plot" class="plot" style="display: none;">
</div>
<div id="reg-metric" class="table-container">
<table></table>
</div>
<div id="metrics" class="table-container">
<table></table>
</div>
<div id="confusion-matrix" class="table-container">
<table></table>
</div>
</div>
</div>
<!-- <div id="footer">
<p>© 2024 Fraser King |<a href="https://umich.edu/" target="_blank">University of Michigan</a>| Towards Interpretable Models</p>
</div> -->
<script src="scripts/script.js"></script>
</body>
</html>