Hugging Face's logo

Spaces:
coolkisdmx
/
Mininet
Running

App Files Community
coolkisdmx commited on
Commit
09b8c35
·
verified ·
1 Parent(s): f3df93a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +279 -18
index.html CHANGED
@@ -1,19 +1,280 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mininet</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background-color: #f0f0f0; /* Light gray background */
13
+ }
14
+
15
+ #container {
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ justify-content: center;
20
+ margin-top: 20px;
21
+ }
22
+
23
+ .section {
24
+ background-color: #fff; /* White background */
25
+ padding: 20px;
26
+ border-radius: 10px;
27
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow */
28
+ margin-top: 20px;
29
+ width: 80%;
30
+ max-width: 500px;
31
+ }
32
+
33
+ h1 {
34
+ color: #2196F3; /* Blue color */
35
+ font-size: 36px;
36
+ margin-bottom: 20px;
37
+ }
38
+
39
+ h2 {
40
+ color: #555; /* Dark gray color */
41
+ font-size: 24px;
42
+ margin-bottom: 15px;
43
+ }
44
+
45
+ label {
46
+ display: block;
47
+ margin-bottom: 5px;
48
+ }
49
+
50
+ input[type="text"] {
51
+ width: calc(100% - 16px); /* Subtract the padding and border */
52
+ padding: 8px;
53
+ margin-bottom: 10px;
54
+ border: 1px solid #ccc; /* Light gray border */
55
+ border-radius: 5px;
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ button {
60
+ padding: 10px 20px;
61
+ background-color: #2196F3; /* Blue color */
62
+ color: #fff; /* White color */
63
+ border: none;
64
+ border-radius: 5px;
65
+ cursor: pointer;
66
+ font-size: 16px;
67
+ }
68
+
69
+ button:hover {
70
+ background-color: #0d8bff; /* Darker blue color */
71
+ }
72
+
73
+ #variables {
74
+ margin-top: 10px;
75
+ }
76
+
77
+ svg {
78
+ overflow: visible;
79
+ margin-bottom: 20px;
80
+ }
81
+
82
+ .background-circle {
83
+ fill: #2196F3; /* Blue background color */
84
+ }
85
+
86
+ .neuron {
87
+ fill: #FFFFFF; /* White neuron color */
88
+ }
89
+
90
+ .connection {
91
+ stroke: #FFFFFF; /* White connection color */
92
+ stroke-width: 2;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body>
97
+ <div id="container">
98
+ <h1>Mininet</h1>
99
+
100
+ <svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
101
+ <!-- Draw background circle -->
102
+ <circle class="background-circle" cx="125" cy="125" r="125" />
103
+
104
+ <!-- Draw neural net -->
105
+ <circle class="neuron" cx="75" cy="75" r="8" />
106
+ <circle class="neuron" cx="75" cy="125" r="8" />
107
+ <circle class="neuron" cx="75" cy="175" r="8" />
108
+
109
+ <circle class="neuron" cx="125" cy="75" r="8" />
110
+ <circle class="neuron" cx="125" cy="125" r="8" />
111
+ <circle class="neuron" cx="125" cy="175" r="8" />
112
+
113
+ <circle class="neuron" cx="175" cy="100" r="8" />
114
+ <circle class="neuron" cx="175" cy="150" r="8" />
115
+
116
+ <!-- Draw connections -->
117
+ <line class="connection" x1="75" y1="75" x2="125" y2="75" />
118
+ <line class="connection" x1="75" y1="75" x2="125" y2="125" />
119
+ <line class="connection" x1="75" y1="75" x2="125" y2="175" />
120
+
121
+ <line class="connection" x1="75" y1="125" x2="125" y2="75" />
122
+ <line class="connection" x1="75" y1="125" x2="125" y2="125" />
123
+ <line class="connection" x1="75" y1="125" x2="125" y2="175" />
124
+
125
+ <line class="connection" x1="75" y1="175" x2="125" y2="75" />
126
+ <line class="connection" x1="75" y1="175" x2="125" y2="125" />
127
+ <line class="connection" x1="75" y1="175" x2="125" y2="175" />
128
+
129
+ <line class="connection" x1="125" y1="75" x2="175" y2="100" />
130
+ <line class="connection" x1="125" y1="125" x2="175" y2="100" />
131
+ <line class="connection" x1="125" y1="175" x2="175" y2="150" />
132
+ </svg>
133
+
134
+
135
+ <div id="inputs" class="section">
136
+ <h2>Input Section</h2>
137
+ <label for="numNodes">Enter the number of Model Inputs:</label>
138
+ <input type="text" id="numNodes" name="numNodes"><br>
139
+ <label for="numOutNodes">Enter the number of Model Outputs:</label>
140
+ <input type="text" id="numOutNodes" name="numOutNodes"><br>
141
+ <label for="Xlayers">Enter the number of Model X layers:</label>
142
+ <input type="text" id="Xlayers" name="Xlayers"><br>
143
+ <label for="Ylayers">Enter the number of Model Y layers:</label>
144
+ <input type="text" id="Ylayers" name="Ylayers"><br>
145
+ <button onclick="createVariables()">Create Minimodel</button>
146
+ <button onclick="feedForward()">Feed</button>
147
+ <button onclick="toggleModelInfo()">Toggle Model Info</button>
148
+ </div>
149
+
150
+ <div id="Feeding and Testing" class="section">
151
+ <h2>Feeding and Testing</h2>
152
+ <div id="variables"></div>
153
+ </div>
154
+
155
+ <div id="modelInfo" class="section">
156
+ <h2>Model Information</h2>
157
+ </div>
158
+ </div>
159
+
160
+ <h4>This is a Neural Network demo running all in HTML/Javascript, feel free to use and modify this for your own projects. (Code made with ChatGPT fed specific instructions, and some human code stitching)<h4>
161
+
162
+ <script>
163
+ function createVariables() {
164
+ // Get the values entered in the text boxes
165
+ let numNodes = parseInt(document.getElementById("numNodes").value);
166
+ let numOutNodes = parseInt(document.getElementById("numOutNodes").value);
167
+ let Xlayers = parseInt(document.getElementById("Xlayers").value);
168
+ let Ylayers = parseInt(document.getElementById("Ylayers").value);
169
+
170
+ // Clear the previous output
171
+ document.getElementById("variables").innerHTML = "";
172
+ document.getElementById("modelInfo").innerHTML = "";
173
+
174
+ // Create "in" variables
175
+ let variablesDiv = document.getElementById("variables");
176
+ for (let i = 1; i <= numNodes; i++) {
177
+ window["in" + i] = 0; // Initialize to 0
178
+ variablesDiv.innerHTML += `in${i}: <input type='text' id='in${i}'><br>`;
179
+ }
180
+
181
+ // Create "out" variables
182
+ for (let i = 1; i <= numOutNodes; i++) {
183
+ window["out" + i] = 0;
184
+ variablesDiv.innerHTML += `out${i}: ${window["out" + i]}<br>`;
185
+ }
186
+
187
+ // Create "laynXnY" variables and connections
188
+ let modelInfoDiv = document.getElementById("modelInfo");
189
+ for (let nx = 0; nx < Xlayers; nx++) {
190
+ for (let ny = 0; ny < Ylayers; ny++) {
191
+ let variableName = `lay${nx}x${ny}y`;
192
+ window[variableName] = 0;
193
+ modelInfoDiv.innerHTML += `${variableName}: ${window[variableName]}<br>`;
194
+
195
+ // Create connections from previous layer to current layer
196
+ if (nx === 0) {
197
+ // Connect "in" variables to the first layer
198
+ for (let i = 1; i <= numNodes; i++) {
199
+ let connectionName = `in${i}_${variableName}`;
200
+ window[connectionName] = Math.random() * 4 - 2; // Weight between -2 and 2
201
+ modelInfoDiv.innerHTML += `${connectionName} weight: ${window[connectionName]}<br>`;
202
+ }
203
+ } else {
204
+ // Connect previous layer to current layer
205
+ for (let prev_ny = 0; prev_ny < Ylayers; prev_ny++) {
206
+ let prevVariableName = `lay${nx-1}x${prev_ny}y`;
207
+ let connectionName = `${prevVariableName}_${variableName}`;
208
+ window[connectionName] = Math.random() * 4 - 2; // Weight between -2 and 2
209
+ modelInfoDiv.innerHTML += `${connectionName} weight: ${window[connectionName]}<br>`;
210
+ }
211
+ }
212
+
213
+ // If this is the last layer, connect to "out" variables
214
+ if (nx === Xlayers - 1) {
215
+ for (let i = 1; i <= numOutNodes; i++) {
216
+ let connectionName = `${variableName}_out${i}`;
217
+ window[connectionName] = Math.random() * 4 - 2; // Weight between -2 and 2
218
+ modelInfoDiv.innerHTML += `${connectionName} weight: ${window[connectionName]}<br>`;
219
+ }
220
+ }
221
+ }
222
+ }
223
+ }
224
+
225
+ function feedForward() {
226
+ // Get input values
227
+ let numNodes = parseInt(document.getElementById("numNodes").value);
228
+ let numOutNodes = parseInt(document.getElementById("numOutNodes").value);
229
+ let Xlayers = parseInt(document.getElementById("Xlayers").value);
230
+ let Ylayers = parseInt(document.getElementById("Ylayers").value);
231
+
232
+ for (let i = 1; i <= numNodes; i++) {
233
+ window["in" + i] = parseFloat(document.getElementById("in" + i).value) || 0;
234
+ }
235
+
236
+ // Process layers
237
+ for (let nx = 0; nx < Xlayers; nx++) {
238
+ for (let ny = 0; ny < Ylayers; ny++) {
239
+ let variableName = `lay${nx}x${ny}y`;
240
+ window[variableName] = 0; // Initialize to 0
241
+
242
+ // Sum inputs
243
+ if (nx === 0) {
244
+ for (let i = 1; i <= numNodes; i++) {
245
+ let connectionName = `in${i}_${variableName}`;
246
+ window[variableName] += window["in" + i] * window[connectionName];
247
+ }
248
+ } else {
249
+ for (let prev_ny = 0; prev_ny < Ylayers; prev_ny++) {
250
+ let prevVariableName = `lay${nx-1}x${prev_ny}y`;
251
+ let connectionName = `${prevVariableName}_${variableName}`;
252
+ window[variableName] += window[prevVariableName] * window[connectionName];
253
+ }
254
+ }
255
+ }
256
+ }
257
+
258
+ // Calculate output values
259
+ for (let i = 1; i <= numOutNodes; i++) {
260
+ window["out" + i] = 0; // Initialize to 0
261
+ for (let ny = 0; ny < Ylayers; ny++) {
262
+ let variableName = `lay${Xlayers-1}x${ny}y`;
263
+ let connectionName = `${variableName}_out${i}`;
264
+ window["out" + i] += window[variableName] * window[connectionName];
265
+ }
266
+ document.getElementById("variables").innerHTML += `out${i}: ${window["out" + i]}<br>`;
267
+ }
268
+ }
269
+
270
+ function toggleModelInfo() {
271
+ let modelInfoDiv = document.getElementById("modelInfo");
272
+ if (modelInfoDiv.style.display === "none") {
273
+ modelInfoDiv.style.display = "block";
274
+ } else {
275
+ modelInfoDiv.style.display = "none";
276
+ }
277
+ }
278
+ </script>
279
+ </body>
280
  </html>