-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (110 loc) · 4.27 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
<!DOCTYPE HTML>
<html xml:lang="en" lang="en">
<head>
<title>CSE512 | A3 [Add: title]</title>
<style media="all">
/* reset */
* { padding: 0; margin: 0; box-sizing: border-box; }
body {
margin: 20px auto;
width: calc(100% - 40px);
max-width: 1200px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
/* link */
a, a:visited { text-decoration: none; color: #007BFF; }
a:hover { text-decoration: underline; color: #0056b3; }
/* title */
h1, h2, h3, h4, h5 {
margin: 20px 0 10px;
color: #333;
}
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
/* margin */
p { margin-bottom: 10px; }
.content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.footer {
margin-top: 30px;
padding-top: 10px;
text-align: center;
font-size: 14px;
color: #666;
}
/* flex*/
@media (max-width: 768px) {
body {
width: auto;
margin: 10px;
}
.content, .footer {
padding: 15px;
}
}
</style>
</head>
<body>
<div class="content">
<section class="title">
<a href="/">Visualizing neural network architecture</a>
</section>
<section>
<p>
<strong>Team Members</strong>: Nora (Ting) Liu; Theodore Zhao
</p>
</section>
<section>
<h2>How is the Neural Network "Thinking"?</h2>
<p>We visualize the internal status of a neural network predicting weekly sales amount of Walmart from a set of input values.</p>
<p>The nodes in the network are the "neurons". They are activated by the input values at the left most 5 nodes. </p>
<p>The neural network "thinks" by computing the neuron activation propagated from left to right through the weighted links. </p>
<p>The predicted sales amount is reflected by the right most neuron. Hover your mouse on it to see the predicted value!</p>
</section>
<!-- This web-based visualization system shows the activities in the neural network of a virtual moth.-->
<section class="aaaaa">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/@neuralviz/nora.js?v=3";
const runtime = new Runtime();
const main=runtime.module(notebook, name => {
if (name==="chart") {return new Inspector(document.getElementById('chart'))}
if (name==="viewof timeButtonsNaive") {return new Inspector(document.getElementById('slider'))}
if (name==="viewof model") {return new Inspector(document.getElementById('model'))}
});
</script>
<div id="slider" class="sl"></div>
<div id="model" class="nn"></div>
<div id="chart" class="ct"></div>
<section>
<h2>How to interact with the neural network?</h2>
<!-- <em>[Add: running instructions for the software and other optional materials.]</em>
-->
<p>Tune the input values for Holiday, Temperature, Fuel Price, CPI, and Unemployent at the top. </p>
<p>Look at how the neurons got activated differently (size change). The predicted sales value is the right most neuron!</p>
<p>Hover your mouse on a neuron to see its current value.</p>
<p>Use the selection bar at the bottom to filter the links in the neural network by their weights. Note how sparse the neural network is! </p>
<p>If you like, drag a node to reposition it. </p>
<p>We provided three models of different sizes. Feel free to choose from the drop down menu! </p>
</section>
<section>
<p>*The models were trained using data from https://www.kaggle.com/datasets/yasserh/walmart-dataset </p>
</section>
<div class="footer">
<a href="https://www.northeastern.edu/">Northeastern University</a>
</div>
</div>
</body>
</html>