neuralnetworktests/index.html at master · NeedToUpdate/neuralnetworktests · GitHub

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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Artem's Neural Net Fun</title>
    <link rel="preconnect"
        href="https://fonts.googleapis.com">
    <link rel="preconnect"
        href="https://fonts.gstatic.com"
        crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fredoka:wght@300;400&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="title-box">

        <h1 class="title">
            Neural Network Tests
        </h1>
        <p class="description">All of these projects are made with just <a href="./lib/nn.js">one self-written library</a>. It has no dependencies, other than self-written <a href="./lib/matrix.js">matrix</a> and <a
                href="./lib/vector.js">vector</a> libraries. The drawing is all done by a rather
            simple self-written div manipulation library, that was improved heavily with <a href="https://needtoupdate.github.io/testgames">this future project</a>. The project began with <a
                href="https://www.youtube.com/watch?v=9zfeTw-uFCw">this video from the Coding Train</a>. I used this project as my entry to learning javascript in general, as I found this whole idea fascinating, and it pushed me to learn
            more. After about two weeks (almost non-stop), and learning a ton of new math, I had coded out (from scratch) a basic NN, RNN, LSTM, and a basic CNN with all the back propagation code. It was a really fun learning
            experience.</a></p>
    </div>
    <div class="links">

        <div class="option-box"
            onclick="window.location='./eaters.html'">
            <h4 class="subheading">Genetic Algorithms - Eaters with crossover mutations</h4>
            <p class="explanation">The little dudes all have a simple 2 dense layer brain. Once they all die from hunger, the two best dudes have their brains mixed together, and become the parents of the next generation. You can click on
                them to see thier brains in action in the top right corner.</p>
            <div class="image-container"><img class="side-image cover"
                    src="./images/eaters.png"
                    alt=""></div>
        </div>
        <div class="option-box"
            onclick="window.location='./smartrockets.html'">
            <h4 class="subheading">Genetic Algorithms - Smart Rockets</h4>
            <p class="explanation">This was a inspired by <a href="https://shivank1006.github.io/Smart-Rockets/">this project</a>, after seeing it on <a href="https://www.youtube.com/watch?v=bGz7mv2vD6g">Coding Train</a>. I already had all
                the brain code, so strapping a rocket to it couldn't hurt. The rockets have basic rocket physics, as in, they need to fight gravity, and can only turn using side boosters, they can't simply rotate themselves. The rockets
                can't see the target, they only know thier own speed, x and y
                position, and how much fuel they have left. Once they all die, the fittest gets cloned and mutated. The fittest's nreain is in the top right corner</p>
            <div class="image-container">
                <img class="side-image cover"
                    src="./images/smart_rockets.png"
                    alt="">
            </div>
        </div>
        <div class="option-box large"
            onclick="window.location='https\://needtoupdate.github.io/EvoWorld'">
            <h4 class="subheading">Genetic Algorithms - Little Worms</h4>
            <p class="explanation">This was a much more ambitious version of the eaters above, each worm has a unique DNA, which determines how many eyes they have, what senses they have (like feeling for food with their body), what they
                can do, e.g walk forward/turn/see/eat, and what their brain is like, how many nodes, layers, activation functions etc. They can get fat from eating more than they can handle, which lets them live longer. Nothing in the
                classes is hard-coded, e.g. their eyes are just an Appendage() class with a use()
                function.) The idea was later on I could add arms, legs, wings, etc. But I got distracted with other projects and forgot about this one. perhaps I'll revisit it later and add more features. Again, click to see their brains
                in action.</p>
            <div class="image-container">
                <img class="side-image cover"
                    src="./images/worms.png"
                    alt="">
            </div>
        </div>
        <div class="option-box"
            onclick="window.location='./mnist_with_nn.html'">
            <h4 class="subheading">Solving MNIST with a simple dense NN</h4>
            <p class="explanation">This uses a model with 3 dense layers with sigmoid activation functions. It reached about a 70% accuracy after a few thousand trainings. Click the 'load trained model' at the top and draw a number on the
                right canvas. Click guess and see if the model got it right. You can also download or upload a .json of the model (but its in my format used by the library) and also upload csv files of the data using the same button.</p>
            <div class="image-container">
                <img class="side-image"
                    src="./images/mnist_nn.png"
                    alt="">
            </div>
        </div>
        <div class="option-box"
            onclick="window.location='./mnist_with_cnn.html'">
            <h4 class="subheading">Solving MNIST with a CNN</h4>
            <p class="explanation">This model uses 2 convolution layers with relu and maxpools, followed by one dense layer. Much more effective than the nn above, as it reaches a 92% accuracy on the testing data. It can probably reach a
                much higher accuracy, but this training isn't very fast and kind of pointless, so this is the accuracy only after a couple thousand training cycles, not even one epoch. Same controls as above, if you want to try it out.</p>
            <div class="image-container">
                <img class="side-image"
                    src="./images/mnist_cnn.png"
                    alt="">
            </div>
        </div>
        <div class="option-box"
            onclick="window.location='./word_learner.html'">
            <h4 class="subheading">Predicting a single word with a simple RNN</h4>
            <p class="explanation">This model has a single recurrent layer, followed by a dense layer. It can learn one word basically. Type a word in the fist box, click 'use word', then hit start to start training. Training will
                automatically stop when accuracy hits 100%. Then try typing in the second box, the model's prediction will be in the parentheses</p>
            <div class="image-container">
                <img class="side-image"
                    src="./images/rnn.png"
                    alt="">
            </div>
        </div>
        <div class="option-box"
            onclick="window.location='./lstm.html'">
            <h4 class="subheading">Learning a whole alphabet with an LSTM</h4>
            <p class="explanation">This model now uses a single LSTM layer to achieve learning much longer words and sentences than the model above. While the one above is unable to learn 2 pathways, for example the word 'hello' an l can
                then be an l, or an o. This lstm layer is way better at that, and it can even learn the entire alphabet, or multiple spaces in a sentence. Amazing for something so simple.</p>
            <div class="image-container">
                <img class="side-image"
                    src="./images/lstm.png"
                    alt="">
            </div>
        </div>
        <div class="option-box large"
            onclick="window.location='./word2vecattempt.html'">
            <h4 class="subheading">word2vec trials</h4>
            <p class="explanation">This is a simple test after learning about word2vec and how it works. Using a simple dense layer, creates an encoder function. It takes the sentences in the textarea, and runs them through. I then train it
                once, and take the weight values out of the middle layer. It creates a 5 dimensional vector, represented with x,y position, and h,s,l for colour (its easier to see similarities than rgb). It creates some interesting patterns
                pretty fast, like having similar words be on the same axis, or of the same shade.</p>
            <div class="image-container">
                <img class="side-image"
                    src="./images/word2vec.png"
                    alt="">
            </div>
        </div>
        <div class="option-box"
            onclick="window.location='./cnn_quickdraw.html'">
            <h4 class="subheading">CNN to detect Google's quickdraw doodles</h4>
            <p class="explanation">This uses a similar approach as the MNIST CNN above, but to detect one of 3 images, a car, a star or a fish. It can do more, but requires more training which is slow, and is unnecessary as this is just a
                simple proof-of-concept test. It achieves pretty good accuracy after 15000 trainings, or 1/2 of an epoch of the training data I used. Same controls as the other drawing models.</p>
            <div class="image-container">
                <img class="side-image"
                    src="./images/cnn.png"
                    alt="">
            </div>
        </div>
    </div>
</body>
<style>
    * {
        font-family: 'Fredoka', sans-serif;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(244, 255, 244)
    }

    .title {
        color: hsl(120, 100%, 30%);
        text-transform: uppercase;
        font-weight: 100;
        padding-left: 1rem;

    }

    .title-box {
        border-radius: 3px;
        padding: 4px;
        box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 15px, rgba(0, 0, 0, .3) 1px 1px 2px;
        transition: all 0.1s ease-in-out;
        margin-bottom: 1rem;
        background-color: white;
    }

    .description {
        color: hsl(120, 100%, 20%);
        padding-left: 10px;
    }

    .links {
        display: flex;
        flex-wrap: wrap;
    }

    .option-box {
        display: grid;
        grid-template-areas: "title pic""explanation pic";
        grid-template-columns: auto 200px;
        grid-template-rows: 30px auto;
        flex-grow: 1;
        border-left: solid hsl(120, 100%, 30%) 2px;
        border-radius: 3px;
        margin: 3px;
        box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 15px, rgba(0, 0, 0, .3) 1px 1px 2px;
        transition: all 0.1s ease-in-out;

        height: 185px;
        background-color: white;
    }

    .large {
        height: 240px;
    }

    .option-box:hover {
        transform: translate(-1px, -1px);
        cursor: pointer;
    }

    .option-box:active {
        transform: translate(1px, 1px);
    }

    .subheading {
        grid-area: title;
        margin: 0;
        padding: 3px;
        padding-left: 1rem;
        font-size: 1.2rem;
        font-weight: bolder;
        color: black;
        border-bottom: hsl(120, 100%, 30%) 1px solid;
    }

    .explanation {
        grid-area: explanation;
        padding-left: 10px;
        color: black;
    }

    .image-container {
        grid-area: pic;
        width: 200px;
        height: 100%;
        overflow: hidden;
        border-left: hsl(120, 100%, 20%) 2px solid;
    }

    .side-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cover {
        object-fit: cover;
    }

    @media screen and (max-width: 768px) {
        .option-box {
            grid-template-areas: "title pic""explanation explanation";
            grid-template-rows: 150px auto;
            grid-template-columns: 50% 50%;
            flex-grow: 1;
            border-left: solid hsl(120, 100%, 30%) 2px;
            border-radius: 3px;
            margin: 3px;
            box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 15px, rgba(0, 0, 0, .3) 1px 1px 2px;
            transition: all 0.1s ease-in-out;
            height: fit-content;
            height: 350px;
            background-color: white;

        }

        .image-container {
            width: 100%;
        }

        .large {
            height: 440px;
        }

        .subheading {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

</style>

</html>