Register
Login
Resources
Docs Blog Datasets Glossary Case Studies Tutorials & Webinars
Product
Data Engine LLMs Platform Enterprise
Pricing Explore
Connect to our Discord channel
Resources  
Docs Blog Datasets Glossary Case Studies Tutorials & Webinars
Explore Pricing
Product  
Data Engine LLMs Platform Enterprise
Connect to Dagshub Discord channel
Register
Login

ThomIves
/
Neural_Net_Visualizer

Watch 1
Issues 0 Pull Requests 0 Discussions 0
Integration:  git
ThomIves b5e3ca5530
updating with IMLAI
1 year ago
3 Commits
All
Data
Models
Notebooks
DVC
Git
Initial_Neural_Network.png
cd4843ae06
added screen shot of vpython window showing network
2 years ago
Linear_One_Layer_One_Neuron_Image.svg
4064a98fd5
first push of first class and image file
2 years ago
ReadMe.html
b5e3ca5530
updating with IMLAI
1 year ago
ReadMe.md
b5e3ca5530
updating with IMLAI
1 year ago
ReadMe.pdf
b5e3ca5530
updating with IMLAI
1 year ago
Visual_NN.py
b5e3ca5530
updating with IMLAI
1 year ago
Storage Buckets
DagsHub Storage
Choose your storage provider

ReadMe.html

You have to be logged in to leave a comment. Sign In
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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363 
  1. <!DOCTYPE html><html><head>
    2. 

  2.       <title>ReadMe</title>
    3. 

  3.       <meta charset="utf-8">
    4. 

  4.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5. 

  5.       
    6. 

  6.       <link rel="stylesheet" href="file:////home/thom/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.6.5/node_modules/@shd101wyy/mume/dependencies/katex/katex.min.css">
    7. 

  7.       
    8. 

  8.       
    9. 

  9.       
    10. 

  10.       
    11. 

  11.       
    12. 

  12.       
    13. 

  13.       
    14. 

  14.       
    15. 

  15.       
    16. 

  16.       <style>
    17. 

  17.       /**
    18. 

  18.  * prism.js Github theme based on GitHub's theme.
    19. 

  19.  * @author Sam Clarke
    20. 

  20.  */
    21. 

  21. code[class*="language-"],
    22. 

  22. pre[class*="language-"] {
    23. 

  23.   color: #333;
    24. 

  24.   background: none;
    25. 

  25.   font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    26. 

  26.   text-align: left;
    27. 

  27.   white-space: pre;
    28. 

  28.   word-spacing: normal;
    29. 

  29.   word-break: normal;
    30. 

  30.   word-wrap: normal;
    31. 

  31.   line-height: 1.4;
    32. 

  32. 

  33.   -moz-tab-size: 8;
    34. 

  34.   -o-tab-size: 8;
    35. 

  35.   tab-size: 8;
    36. 

  36. 

  37.   -webkit-hyphens: none;
    38. 

  38.   -moz-hyphens: none;
    39. 

  39.   -ms-hyphens: none;
    40. 

  40.   hyphens: none;
    41. 

  41. }
    42. 

  42. 

  43. /* Code blocks */
    44. 

  44. pre[class*="language-"] {
    45. 

  45.   padding: .8em;
    46. 

  46.   overflow: auto;
    47. 

  47.   /* border: 1px solid #ddd; */
    48. 

  48.   border-radius: 3px;
    49. 

  49.   /* background: #fff; */
    50. 

  50.   background: #f5f5f5;
    51. 

  51. }
    52. 

  52. 

  53. /* Inline code */
    54. 

  54. :not(pre) > code[class*="language-"] {
    55. 

  55.   padding: .1em;
    56. 

  56.   border-radius: .3em;
    57. 

  57.   white-space: normal;
    58. 

  58.   background: #f5f5f5;
    59. 

  59. }
    60. 

  60. 

  61. .token.comment,
    62. 

  62. .token.blockquote {
    63. 

  63.   color: #969896;
    64. 

  64. }
    65. 

  65. 

  66. .token.cdata {
    67. 

  67.   color: #183691;
    68. 

  68. }
    69. 

  69. 

  70. .token.doctype,
    71. 

  71. .token.punctuation,
    72. 

  72. .token.variable,
    73. 

  73. .token.macro.property {
    74. 

  74.   color: #333;
    75. 

  75. }
    76. 

  76. 

  77. .token.operator,
    78. 

  78. .token.important,
    79. 

  79. .token.keyword,
    80. 

  80. .token.rule,
    81. 

  81. .token.builtin {
    82. 

  82.   color: #a71d5d;
    83. 

  83. }
    84. 

  84. 

  85. .token.string,
    86. 

  86. .token.url,
    87. 

  87. .token.regex,
    88. 

  88. .token.attr-value {
    89. 

  89.   color: #183691;
    90. 

  90. }
    91. 

  91. 

  92. .token.property,
    93. 

  93. .token.number,
    94. 

  94. .token.boolean,
    95. 

  95. .token.entity,
    96. 

  96. .token.atrule,
    97. 

  97. .token.constant,
    98. 

  98. .token.symbol,
    99. 

  99. .token.command,
    100. 

  100. .token.code {
    101. 

  101.   color: #0086b3;
    102. 

  102. }
    103. 

  103. 

  104. .token.tag,
    105. 

  105. .token.selector,
    106. 

  106. .token.prolog {
    107. 

  107.   color: #63a35c;
    108. 

  108. }
    109. 

  109. 

  110. .token.function,
    111. 

  111. .token.namespace,
    112. 

  112. .token.pseudo-element,
    113. 

  113. .token.class,
    114. 

  114. .token.class-name,
    115. 

  115. .token.pseudo-class,
    116. 

  116. .token.id,
    117. 

  117. .token.url-reference .token.variable,
    118. 

  118. .token.attr-name {
    119. 

  119.   color: #795da3;
    120. 

  120. }
    121. 

  121. 

  122. .token.entity {
    123. 

  123.   cursor: help;
    124. 

  124. }
    125. 

  125. 

  126. .token.title,
    127. 

  127. .token.title .token.punctuation {
    128. 

  128.   font-weight: bold;
    129. 

  129.   color: #1d3e81;
    130. 

  130. }
    131. 

  131. 

  132. .token.list {
    133. 

  133.   color: #ed6a43;
    134. 

  134. }
    135. 

  135. 

  136. .token.inserted {
    137. 

  137.   background-color: #eaffea;
    138. 

  138.   color: #55a532;
    139. 

  139. }
    140. 

  140. 

  141. .token.deleted {
    142. 

  142.   background-color: #ffecec;
    143. 

  143.   color: #bd2c00;
    144. 

  144. }
    145. 

  145. 

  146. .token.bold {
    147. 

  147.   font-weight: bold;
    148. 

  148. }
    149. 

  149. 

  150. .token.italic {
    151. 

  151.   font-style: italic;
    152. 

  152. }
    153. 

  153. 

  154. 

  155. /* JSON */
    156. 

  156. .language-json .token.property {
    157. 

  157.   color: #183691;
    158. 

  158. }
    159. 

  159. 

  160. .language-markup .token.tag .token.punctuation {
    161. 

  161.   color: #333;
    162. 

  162. }
    163. 

  163. 

  164. /* CSS */
    165. 

  165. code.language-css,
    166. 

  166. .language-css .token.function {
    167. 

  167.   color: #0086b3;
    168. 

  168. }
    169. 

  169. 

  170. /* YAML */
    171. 

  171. .language-yaml .token.atrule {
    172. 

  172.   color: #63a35c;
    173. 

  173. }
    174. 

  174. 

  175. code.language-yaml {
    176. 

  176.   color: #183691;
    177. 

  177. }
    178. 

  178. 

  179. /* Ruby */
    180. 

  180. .language-ruby .token.function {
    181. 

  181.   color: #333;
    182. 

  182. }
    183. 

  183. 

  184. /* Markdown */
    185. 

  185. .language-markdown .token.url {
    186. 

  186.   color: #795da3;
    187. 

  187. }
    188. 

  188. 

  189. /* Makefile */
    190. 

  190. .language-makefile .token.symbol {
    191. 

  191.   color: #795da3;
    192. 

  192. }
    193. 

  193. 

  194. .language-makefile .token.variable {
    195. 

  195.   color: #183691;
    196. 

  196. }
    197. 

  197. 

  198. .language-makefile .token.builtin {
    199. 

  199.   color: #0086b3;
    200. 

  200. }
    201. 

  201. 

  202. /* Bash */
    203. 

  203. .language-bash .token.keyword {
    204. 

  204.   color: #0086b3;
    205. 

  205. }
    206. 

  206. 

  207. /* highlight */
    208. 

  208. pre[data-line] {
    209. 

  209.   position: relative;
    210. 

  210.   padding: 1em 0 1em 3em;
    211. 

  211. }
    212. 

  212. pre[data-line] .line-highlight-wrapper {
    213. 

  213.   position: absolute;
    214. 

  214.   top: 0;
    215. 

  215.   left: 0;
    216. 

  216.   background-color: transparent;
    217. 

  217.   display: block;
    218. 

  218.   width: 100%;
    219. 

  219. }
    220. 

  220. 

  221. pre[data-line] .line-highlight {
    222. 

  222.   position: absolute;
    223. 

  223.   left: 0;
    224. 

  224.   right: 0;
    225. 

  225.   padding: inherit 0;
    226. 

  226.   margin-top: 1em;
    227. 

  227.   background: hsla(24, 20%, 50%,.08);
    228. 

  228.   background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
    229. 

  229.   pointer-events: none;
    230. 

  230.   line-height: inherit;
    231. 

  231.   white-space: pre;
    232. 

  232. }
    233. 

  233. 

  234. pre[data-line] .line-highlight:before, 
    235. 

  235. pre[data-line] .line-highlight[data-end]:after {
    236. 

  236.   content: attr(data-start);
    237. 

  237.   position: absolute;
    238. 

  238.   top: .4em;
    239. 

  239.   left: .6em;
    240. 

  240.   min-width: 1em;
    241. 

  241.   padding: 0 .5em;
    242. 

  242.   background-color: hsla(24, 20%, 50%,.4);
    243. 

  243.   color: hsl(24, 20%, 95%);
    244. 

  244.   font: bold 65%/1.5 sans-serif;
    245. 

  245.   text-align: center;
    246. 

  246.   vertical-align: .3em;
    247. 

  247.   border-radius: 999px;
    248. 

  248.   text-shadow: none;
    249. 

  249.   box-shadow: 0 1px white;
    250. 

  250. }
    251. 

  251. 

  252. pre[data-line] .line-highlight[data-end]:after {
    253. 

  253.   content: attr(data-end);
    254. 

  254.   top: auto;
    255. 

  255.   bottom: .4em;
    256. 

  256. }html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
    257. 

  257. /* Please visit the URL below for more information: */
    258. 

  258. /*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
    259. 

  259. 

  260.       </style>
    261. 

  261.     </head>
    262. 

  262.     <body for="html-export">
    263. 

  263.       <div class="mume markdown-preview  ">
    264. 

  264.       <h1 class="mume-header" id="a-neural-network-visualizer-class-created-using-visual-python">A Neural Network Visualizer Class created using Visual Python</h1>
    265. 

  265. 

  266. <blockquote>
    267. 

  267. <p>by Thom Ives, Ph.D.</p>
    268. 

  268. </blockquote>
    269. 

  269. <p><img src="https://dagshub.com/ThomIves/PyTorch_Journey/raw/aefdfaa0c20cdff3c13e8238f1cb93bec72eb461/IMLAI_1700x500_Inv.png" alt="Integrated Machine Learning &amp; AI Logo"></p>
    270. 

  270. <p>This class is meant to help us practice <strong>ABV</strong> in our DS, ML, AI work - <em>Always Be Visualizing</em>.</p>
    271. 

  271. <p><img src="Initial_Neural_Network.png" alt="First Neural Net Test"></p>
    272. 

  272. <p>Why not Manim? I had a suspicion that it would be easier, at least for me, to do this in Visual Python, which I have been using for over 20 years now. That said, which is best? I don&apos;t know yet. I feel they are both good and powerful, and I do want to do the same in Manim. I suspect that it might work out quite easily in Manim too, but I am not sure yet if it would be as flexible as this tool turned out to be. And this is only the beginning for this class. <strong>NOTE</strong> that there is only an <code>__init__</code> function at this point. We will be able to add dynamic coloring and images representing neuron activations and more in the future. However, this is a great start.</p>
    273. 

  273. <h1 class="mume-header" id="the-code">The Code</h1>
    274. 

  274. 

  275. <pre data-role="codeBlock" data-info="python" class="language-python"><span class="token keyword keyword-import">import</span> vpython <span class="token keyword keyword-as">as</span> vp
    276. 

  276. <span class="token keyword keyword-import">import</span> numpy <span class="token keyword keyword-as">as</span> np
    277. 

  277. </pre><p>We want to establish colors in one place, so that we do not need to update multiple places when we want to change them.</p>
    278. 

  278. <pre data-role="codeBlock" data-info="python" class="language-python">neuron_color <span class="token operator">=</span> vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token number">0.00</span><span class="token punctuation">,</span> <span class="token number">0.49</span><span class="token punctuation">,</span> <span class="token number">0.73</span><span class="token punctuation">)</span>
    279. 

  279. weight_color <span class="token operator">=</span> vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token number">0.80</span><span class="token punctuation">,</span> <span class="token number">0.80</span><span class="token punctuation">,</span> <span class="token number">0.80</span><span class="token punctuation">)</span>
    280. 

  280. text_color <span class="token operator">=</span> vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span>
    281. 

  281. </pre><p>We pass in an architecture, which is simply an array with the number of neurons in each layer as the elements. Thus, the length of the architecture array is the number of layers including input and output layers. We also pass in a title. We also initialize storage arrays for Visual Python objects that form the network. Finally, we establish some helpful values for spacing out the network objects.</p>
    282. 

  282. <pre data-role="codeBlock" data-info="python" class="language-python"><span class="token keyword keyword-class">class</span> <span class="token class-name">Network</span><span class="token punctuation">:</span>
    283. 

  283.     <span class="token keyword keyword-def">def</span> <span class="token function">__init__</span><span class="token punctuation">(</span>self<span class="token punctuation">,</span> architecture<span class="token punctuation">,</span> title<span class="token punctuation">)</span><span class="token punctuation">:</span>
    284. 

  284.         neuron_storage <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    285. 

  285.         weight_storage <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    286. 

  286.         net_amp <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token builtin">len</span><span class="token punctuation">(</span>architecture<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span>
    287. 

  287.         max_amp <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token builtin">max</span><span class="token punctuation">(</span>architecture<span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span>
    288. 

  288. </pre><p>We also establish some helpful values for spacing out the textS objects.</p>
    289. 

  289. <pre data-role="codeBlock" data-info="python" class="language-python">        x_text <span class="token operator">=</span> net_amp
    290. 

  290.         y_text <span class="token operator">=</span> max_amp <span class="token operator">+</span> <span class="token number">0.5</span>
    291. 

  291. </pre><p>Create the title text.</p>
    292. 

  292. <pre data-role="codeBlock" data-info="python" class="language-python">        vp<span class="token punctuation">.</span>text<span class="token punctuation">(</span>text<span class="token operator">=</span>title<span class="token punctuation">,</span> pos<span class="token operator">=</span>vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> y_text<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    293. 

  293.                 align<span class="token operator">=</span><span class="token string">&quot;center&quot;</span><span class="token punctuation">,</span> color<span class="token operator">=</span>text_color<span class="token punctuation">,</span> height<span class="token operator">=</span><span class="token number">0.2</span><span class="token punctuation">)</span>
    294. 

  294. </pre><p>Create helpful text below the network.</p>
    295. 

  295. <pre data-role="codeBlock" data-info="python" class="language-python">        <span class="token comment"># Descriptive Text Below the Network</span>
    296. 

  296.         vp<span class="token punctuation">.</span>text<span class="token punctuation">(</span>text<span class="token operator">=</span><span class="token string">&quot;inputs&quot;</span><span class="token punctuation">,</span> pos<span class="token operator">=</span>vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token operator">-</span>x_text<span class="token punctuation">,</span> <span class="token operator">-</span>y_text<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    297. 

  297.                 align<span class="token operator">=</span><span class="token string">&quot;right&quot;</span><span class="token punctuation">,</span> color<span class="token operator">=</span>text_color<span class="token punctuation">,</span> height<span class="token operator">=</span><span class="token number">0.2</span><span class="token punctuation">)</span>
    298. 

  298.         vp<span class="token punctuation">.</span>text<span class="token punctuation">(</span>text<span class="token operator">=</span><span class="token string">&quot;|&quot;</span><span class="token punctuation">,</span> pos<span class="token operator">=</span>vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token operator">-</span>x_text <span class="token operator">+</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token operator">-</span>y_text<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    299. 

  299.                 align<span class="token operator">=</span><span class="token string">&quot;center&quot;</span><span class="token punctuation">,</span> color<span class="token operator">=</span>text_color<span class="token punctuation">,</span> height<span class="token operator">=</span><span class="token number">0.2</span><span class="token punctuation">)</span>
    300. 

  300.         vp<span class="token punctuation">.</span>text<span class="token punctuation">(</span>text<span class="token operator">=</span><span class="token string">&quot;hidden layers&quot;</span><span class="token punctuation">,</span> pos<span class="token operator">=</span>vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span>y_text<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    301. 

  301.                 align<span class="token operator">=</span><span class="token string">&quot;center&quot;</span><span class="token punctuation">,</span> color<span class="token operator">=</span>text_color<span class="token punctuation">,</span> height<span class="token operator">=</span><span class="token number">0.2</span><span class="token punctuation">)</span>
    302. 

  302.         vp<span class="token punctuation">.</span>text<span class="token punctuation">(</span>text<span class="token operator">=</span><span class="token string">&quot;|&quot;</span><span class="token punctuation">,</span> pos<span class="token operator">=</span>vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span>x_text <span class="token operator">-</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token operator">-</span>y_text<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    303. 

  303.                 align<span class="token operator">=</span><span class="token string">&quot;center&quot;</span><span class="token punctuation">,</span> color<span class="token operator">=</span>text_color<span class="token punctuation">,</span> height<span class="token operator">=</span><span class="token number">0.2</span><span class="token punctuation">)</span>
    304. 

  304.         vp<span class="token punctuation">.</span>text<span class="token punctuation">(</span>text<span class="token operator">=</span><span class="token string">&quot;outputs&quot;</span><span class="token punctuation">,</span> pos<span class="token operator">=</span>vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span>x_text<span class="token punctuation">,</span> <span class="token operator">-</span>y_text<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    305. 

  305.                 align<span class="token operator">=</span><span class="token string">&quot;left&quot;</span><span class="token punctuation">,</span> color<span class="token operator">=</span>text_color<span class="token punctuation">,</span> height<span class="token operator">=</span><span class="token number">0.2</span><span class="token punctuation">)</span>
    306. 

  306. </pre><p>Fill out the space needed for neuron storage.</p>
    307. 

  307. <pre data-role="codeBlock" data-info="python" class="language-python">        <span class="token comment"># Initialize the Neuron Storage</span>
    308. 

  308.         <span class="token keyword keyword-for">for</span> n <span class="token keyword keyword-in">in</span> architecture<span class="token punctuation">:</span>
    309. 

  309.             layer <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0</span> <span class="token keyword keyword-for">for</span> i <span class="token keyword keyword-in">in</span> <span class="token builtin">range</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">]</span>
    310. 

  310.             neuron_storage<span class="token punctuation">.</span>append<span class="token punctuation">(</span>layer<span class="token punctuation">)</span>
    311. 

  311. </pre><p>Now, create neurons in the correct locations for each layer.</p>
    312. 

  312. <pre data-role="codeBlock" data-info="python" class="language-python">        <span class="token comment"># Create and Store the Neuron Spheres</span>
    313. 

  313.         <span class="token keyword keyword-for">for</span> layer_num<span class="token punctuation">,</span> num_neurons <span class="token keyword keyword-in">in</span> <span class="token builtin">enumerate</span><span class="token punctuation">(</span>architecture<span class="token punctuation">)</span><span class="token punctuation">:</span>
    314. 

  314.             layer_amp <span class="token operator">=</span> <span class="token punctuation">(</span>num_neurons <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span>
    315. 

  315. </pre><pre data-role="codeBlock" data-info="python" class="language-python">            <span class="token keyword keyword-for">for</span> neuron_num <span class="token keyword keyword-in">in</span> <span class="token builtin">range</span><span class="token punctuation">(</span>num_neurons<span class="token punctuation">)</span><span class="token punctuation">:</span>
    316. 

  316.                 neuron_pos <span class="token operator">=</span> vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span>
    317. 

  317.                     layer_num <span class="token operator">-</span> net_amp<span class="token punctuation">,</span> neuron_num <span class="token operator">-</span> layer_amp<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    318. 

  318.                 neuron_storage<span class="token punctuation">[</span>layer_num<span class="token punctuation">]</span><span class="token punctuation">[</span>neuron_num<span class="token punctuation">]</span> <span class="token operator">=</span> vp<span class="token punctuation">.</span>sphere<span class="token punctuation">(</span>
    319. 

  319.                     pos<span class="token operator">=</span>neuron_pos<span class="token punctuation">,</span> radius<span class="token operator">=</span><span class="token number">0.1</span><span class="token punctuation">,</span> color<span class="token operator">=</span>neuron_color<span class="token punctuation">)</span>
    320. 

  320. </pre><p>Now create the weight bond objects. These are actually just very long thin cylinders.</p>
    321. 

  321. <pre data-role="codeBlock" data-info="python" class="language-python">        <span class="token comment"># Create and Store the Weight Bonds</span>
    322. 

  322.         <span class="token keyword keyword-for">for</span> layer_num<span class="token punctuation">,</span> current_n <span class="token keyword keyword-in">in</span> <span class="token builtin">enumerate</span><span class="token punctuation">(</span>architecture<span class="token punctuation">[</span><span class="token punctuation">:</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
    323. 

  323.             next_n <span class="token operator">=</span> architecture<span class="token punctuation">[</span>layer_num<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span>
    324. 

  324. </pre><pre data-role="codeBlock" data-info="python" class="language-python">            weight_storage<span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    325. 

  325. </pre><pre data-role="codeBlock" data-info="python" class="language-python">            <span class="token keyword keyword-for">for</span> i <span class="token keyword keyword-in">in</span> <span class="token builtin">range</span><span class="token punctuation">(</span>current_n<span class="token punctuation">)</span><span class="token punctuation">:</span>
    326. 

  326.                 weight_storage<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    327. 

  327. </pre><pre data-role="codeBlock" data-info="python" class="language-python">                x_start <span class="token operator">=</span> layer_num <span class="token operator">-</span> net_amp
    328. 

  328.                 x_end <span class="token operator">=</span> x_start <span class="token operator">+</span> <span class="token number">1</span>
    329. 

  329. </pre><pre data-role="codeBlock" data-info="python" class="language-python">                <span class="token keyword keyword-for">for</span> j <span class="token keyword keyword-in">in</span> <span class="token builtin">range</span><span class="token punctuation">(</span>next_n<span class="token punctuation">)</span><span class="token punctuation">:</span>
    330. 

  330.                     y_start <span class="token operator">=</span> i <span class="token operator">-</span> <span class="token punctuation">(</span>current_n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span>
    331. 

  331.                     y_end <span class="token operator">=</span> j <span class="token operator">-</span> <span class="token punctuation">(</span>next_n <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span>
    332. 

  332. </pre><pre data-role="codeBlock" data-info="python" class="language-python">                    start <span class="token operator">=</span> vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span>x_start<span class="token punctuation">,</span> y_start<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    333. 

  333.                     end <span class="token operator">=</span> vp<span class="token punctuation">.</span>vector<span class="token punctuation">(</span>x_end<span class="token punctuation">,</span> y_end<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    334. 

  334. </pre><pre data-role="codeBlock" data-info="python" class="language-python">                    weight_storage<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>append<span class="token punctuation">(</span>vp<span class="token punctuation">.</span>cylinder<span class="token punctuation">(</span>
    335. 

  335.                         pos<span class="token operator">=</span>start<span class="token punctuation">,</span> axis<span class="token operator">=</span>end<span class="token operator">-</span>start<span class="token punctuation">,</span> radius<span class="token operator">=</span><span class="token number">0.01</span><span class="token punctuation">,</span>
    336. 

  336.                         color<span class="token operator">=</span>weight_color<span class="token punctuation">)</span><span class="token punctuation">)</span>
    337. 

  337. </pre><p>Finally, we make our storage objects of visual neuron and weight objects into class attributes for later usage.</p>
    338. 

  338. <pre data-role="codeBlock" data-info="python" class="language-python">         <span class="token comment"># Make Neuron and Weight Bond Storage Class Attributes</span>
    339. 

  339.         self<span class="token punctuation">.</span>neuron_storage <span class="token operator">=</span> neuron_storage
    340. 

  340.         self<span class="token punctuation">.</span>weight_storage <span class="token operator">=</span> weight_storage
    341. 

  341. </pre><h2 class="mume-header" id="instantiation">Instantiation</h2>
    342. 

  342. 

  343. <p>The instantiation of this object builds a static 3D neural network object. Why does 3D matter? It doesn&apos;t ... yet. I intend to extend this work to transformers and beyond. I believe 3D will end up being very helpful for that work.</p>
    344. 

  344. <pre data-role="codeBlock" data-info="python" class="language-python">arch <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
    345. 

  345. network <span class="token operator">=</span> Network<span class="token punctuation">(</span>arch<span class="token punctuation">,</span> <span class="token string">&quot;Neural Network&quot;</span><span class="token punctuation">)</span>
    346. 

  346. </pre><p><strong>NOTE</strong> that we could import this Network class from this module into a separate file, and then instantiate it in the separate file. I just did it here for convenience.</p>
    347. 

  347. <h1 class="mume-header" id="summary">Summary</h1>
    348. 

  348. 

  349. <p>This work will be ongoing. It started with my <a href="https://dagshub.com/ThomIves/PyTorch_Journey">PyTorch Journey</a>, but I am sure it will be reused on many other projects.</p>
    350. 

  350. 

  351.       </div>
    352. 

  352.       
    353. 

  353.       
    354. 

  354.     
    355. 

  355.     
    356. 

  356.     
    357. 

  357.     
    358. 

  358.     
    359. 

  359.     
    360. 

  360.     
    361. 

  361.     
    362. 

  362.   
    363. 

  363.     </body></html>
    364.
Prev
Next
Tip!

Press p or to see the previous file or, n or to see the next file

About

A neural network visualizer that use Visual Python (VPython)

Collaborators 1

Comments

Write Preview
Loading...
Integrate Google Cloud Storage
Use Google Storage
Select bucket
Upload key
Finish

Use Google Cloud Storage!

Browsing data directories saved to Google Cloud Storage is possible with DAGsHub. Let's configure your repository to easily display your data in the context of any commit!

Specify your Google Storage bucket

Service Account Key

Congratulations!

Neural_Net_Visualizer is now integrated with Google Cloud Storage!

Delete Storage Key

Are you sure you want to delete this access key?

No
Yes
Integrate AWS S3
Use S3 remote
Select bucket
Access key
Finish

Use AWS S3 as storage!

Browsing data directories saved to S3 is possible with DAGsHub. Let's configure your repository to easily display your data in the context of any commit!

Specify your S3 bucket

Access key (If needed)

Congratulations!

Neural_Net_Visualizer is now integrated with AWS S3!

Delete Storage Key

Are you sure you want to delete this access key?

No
Yes
Integrate S3 compatible storage
Use S3 like remote
Select bucket
Access key
Finish

Use any S3 compatible storage!

Browsing data directories saved to S3 compatible storage is possible with DAGsHub. Let's configure your repository to easily display your data in the context of any commit!

Specify your S3 bucket

Access key (If needed)

Congratulations!

Neural_Net_Visualizer is now integrated with your S3 compatible storage!

Delete Storage Key

Are you sure you want to delete this access key?

No
Yes
Integrate Azure Cloud Storage
Use Azure Storage
Select bucket
Set key
Finish

Use Azure Cloud Storage!

Browsing data directories saved to Azure Cloud Storage is possible with DAGsHub. Let's configure your repository to easily display your data in the context of any commit!

Specify your Azure Storage bucket

Access key (If needed)

Congratulations!

Neural_Net_Visualizer is now integrated with Azure Cloud Storage!

Delete Storage Key

Are you sure you want to delete this access key?

No
Yes