Spaces:

coolkisdmx
/

Mininet

Running

App Files Files Community

coolkisdmx commited on May 25

Commit

09b8c35

•

1 Parent(s): f3df93a

Update index.html

Browse files

Files changed (1) hide show

index.html +279 -18

index.html CHANGED Viewed

@@ -1,19 +1,280 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mininet</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f0f0f0; /* Light gray background */
+    }
+    #container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20px;
+    }
+    .section {
+      background-color: #fff; /* White background */
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow */
+      margin-top: 20px;
+      width: 80%;
+      max-width: 500px;
+    }
+    h1 {
+      color: #2196F3; /* Blue color */
+      font-size: 36px;
+      margin-bottom: 20px;
+    }
+    h2 {
+      color: #555; /* Dark gray color */
+      font-size: 24px;
+      margin-bottom: 15px;
+    }
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+    input[type="text"] {
+      width: calc(100% - 16px); /* Subtract the padding and border */
+      padding: 8px;
+      margin-bottom: 10px;
+      border: 1px solid #ccc; /* Light gray border */
+      border-radius: 5px;
+      box-sizing: border-box;
+    }
+    button {
+      padding: 10px 20px;
+      background-color: #2196F3; /* Blue color */
+      color: #fff; /* White color */
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+    button:hover {
+      background-color: #0d8bff; /* Darker blue color */
+    }
+    #variables {
+      margin-top: 10px;
+    }
+    svg {
+      overflow: visible;
+      margin-bottom: 20px;
+    }
+    .background-circle {
+      fill: #2196F3; /* Blue background color */
+    }
+    .neuron {
+      fill: #FFFFFF; /* White neuron color */
+    }
+    .connection {
+      stroke: #FFFFFF; /* White connection color */
+      stroke-width: 2;
+    }
+  </style>
+</head>
+<body>
+  <div id="container">
+    <h1>Mininet</h1>
+    <svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
+      <!-- Draw background circle -->
+      <circle class="background-circle" cx="125" cy="125" r="125" />
+      <!-- Draw neural net -->
+      <circle class="neuron" cx="75" cy="75" r="8" />
+      <circle class="neuron" cx="75" cy="125" r="8" />
+      <circle class="neuron" cx="75" cy="175" r="8" />
+      <circle class="neuron" cx="125" cy="75" r="8" />
+      <circle class="neuron" cx="125" cy="125" r="8" />
+      <circle class="neuron" cx="125" cy="175" r="8" />
+      <circle class="neuron" cx="175" cy="100" r="8" />
+      <circle class="neuron" cx="175" cy="150" r="8" />
+      <!-- Draw connections -->
+      <line class="connection" x1="75" y1="75" x2="125" y2="75" />
+      <line class="connection" x1="75" y1="75" x2="125" y2="125" />
+      <line class="connection" x1="75" y1="75" x2="125" y2="175" />
+      <line class="connection" x1="75" y1="125" x2="125" y2="75" />
+      <line class="connection" x1="75" y1="125" x2="125" y2="125" />
+      <line class="connection" x1="75" y1="125" x2="125" y2="175" />
+      <line class="connection" x1="75" y1="175" x2="125" y2="75" />
+      <line class="connection" x1="75" y1="175" x2="125" y2="125" />
+      <line class="connection" x1="75" y1="175" x2="125" y2="175" />
+      <line class="connection" x1="125" y1="75" x2="175" y2="100" />
+      <line class="connection" x1="125" y1="125" x2="175" y2="100" />
+      <line class="connection" x1="125" y1="175" x2="175" y2="150" />
+    </svg>
+    <div id="inputs" class="section">
+      <h2>Input Section</h2>
+      <label for="numNodes">Enter the number of Model Inputs:</label>
+      <input type="text" id="numNodes" name="numNodes"><br>
+      <label for="numOutNodes">Enter the number of Model Outputs:</label>
+      <input type="text" id="numOutNodes" name="numOutNodes"><br>
+      <label for="Xlayers">Enter the number of  Model X layers:</label>
+      <input type="text" id="Xlayers" name="Xlayers"><br>
+      <label for="Ylayers">Enter the number of Model Y layers:</label>
+      <input type="text" id="Ylayers" name="Ylayers"><br>
+      <button onclick="createVariables()">Create Minimodel</button>
+      <button onclick="feedForward()">Feed</button>
+      <button onclick="toggleModelInfo()">Toggle Model Info</button>
+    </div>
+    <div id="Feeding and Testing" class="section">
+      <h2>Feeding and Testing</h2>
+      <div id="variables"></div>
+    </div>
+    <div id="modelInfo" class="section">
+      <h2>Model Information</h2>
+    </div>
+  </div>
+  <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>
+  <script>
+    function createVariables() {
+      // Get the values entered in the text boxes
+      let numNodes = parseInt(document.getElementById("numNodes").value);
+      let numOutNodes = parseInt(document.getElementById("numOutNodes").value);
+      let Xlayers = parseInt(document.getElementById("Xlayers").value);
+      let Ylayers = parseInt(document.getElementById("Ylayers").value);
+      // Clear the previous output
+      document.getElementById("variables").innerHTML = "";
+      document.getElementById("modelInfo").innerHTML = "";
+      // Create "in" variables
+      let variablesDiv = document.getElementById("variables");
+      for (let i = 1; i <= numNodes; i++) {
+        window["in" + i] = 0; // Initialize to 0
+        variablesDiv.innerHTML += `in${i}: <input type='text' id='in${i}'><br>`;
+      }
+      // Create "out" variables
+      for (let i = 1; i <= numOutNodes; i++) {
+        window["out" + i] = 0;
+        variablesDiv.innerHTML += `out${i}: ${window["out" + i]}<br>`;
+      }
+      // Create "laynXnY" variables and connections
+      let modelInfoDiv = document.getElementById("modelInfo");
+      for (let nx = 0; nx < Xlayers; nx++) {
+        for (let ny = 0; ny < Ylayers; ny++) {
+          let variableName = `lay${nx}x${ny}y`;
+          window[variableName] = 0;
+          modelInfoDiv.innerHTML += `${variableName}: ${window[variableName]}<br>`;
+          // Create connections from previous layer to current layer
+          if (nx === 0) {
+            // Connect "in" variables to the first layer
+            for (let i = 1; i <= numNodes; i++) {
+              let connectionName = `in${i}_${variableName}`;
+              window[connectionName] = Math.random() * 4 - 2; // Weight between -2 and 2
+              modelInfoDiv.innerHTML += `${connectionName} weight: ${window[connectionName]}<br>`;
+            }
+          } else {
+            // Connect previous layer to current layer
+            for (let prev_ny = 0; prev_ny < Ylayers; prev_ny++) {
+              let prevVariableName = `lay${nx-1}x${prev_ny}y`;
+              let connectionName = `${prevVariableName}_${variableName}`;
+              window[connectionName] = Math.random() * 4 - 2; // Weight between -2 and 2
+              modelInfoDiv.innerHTML += `${connectionName} weight: ${window[connectionName]}<br>`;
+            }
+          }
+          // If this is the last layer, connect to "out" variables
+          if (nx === Xlayers - 1) {
+            for (let i = 1; i <= numOutNodes; i++) {
+              let connectionName = `${variableName}_out${i}`;
+              window[connectionName] = Math.random() * 4 - 2; // Weight between -2 and 2
+              modelInfoDiv.innerHTML += `${connectionName} weight: ${window[connectionName]}<br>`;
+            }
+          }
+        }
+      }
+    }
+    function feedForward() {
+      // Get input values
+      let numNodes = parseInt(document.getElementById("numNodes").value);
+      let numOutNodes = parseInt(document.getElementById("numOutNodes").value);
+      let Xlayers = parseInt(document.getElementById("Xlayers").value);
+      let Ylayers = parseInt(document.getElementById("Ylayers").value);
+      for (let i = 1; i <= numNodes; i++) {
+        window["in" + i] = parseFloat(document.getElementById("in" + i).value) || 0;
+      }
+      // Process layers
+      for (let nx = 0; nx < Xlayers; nx++) {
+        for (let ny = 0; ny < Ylayers; ny++) {
+          let variableName = `lay${nx}x${ny}y`;
+          window[variableName] = 0; // Initialize to 0
+          // Sum inputs
+          if (nx === 0) {
+            for (let i = 1; i <= numNodes; i++) {
+              let connectionName = `in${i}_${variableName}`;
+              window[variableName] += window["in" + i] * window[connectionName];
+            }
+          } else {
+            for (let prev_ny = 0; prev_ny < Ylayers; prev_ny++) {
+              let prevVariableName = `lay${nx-1}x${prev_ny}y`;
+              let connectionName = `${prevVariableName}_${variableName}`;
+              window[variableName] += window[prevVariableName] * window[connectionName];
+            }
+          }
+        }
+      }
+      // Calculate output values
+      for (let i = 1; i <= numOutNodes; i++) {
+        window["out" + i] = 0; // Initialize to 0
+        for (let ny = 0; ny < Ylayers; ny++) {
+          let variableName = `lay${Xlayers-1}x${ny}y`;
+          let connectionName = `${variableName}_out${i}`;
+          window["out" + i] += window[variableName] * window[connectionName];
+        }
+        document.getElementById("variables").innerHTML += `out${i}: ${window["out" + i]}<br>`;
+      }
+    }
+    function toggleModelInfo() {
+      let modelInfoDiv = document.getElementById("modelInfo");
+      if (modelInfoDiv.style.display === "none") {
+        modelInfoDiv.style.display = "block";
+      } else {
+        modelInfoDiv.style.display = "none";
+      }
+    }
+  </script>
+</body>
 </html>