Spaces:

coolkisdmx
/

Mininet

Running

File size: 9,726 Bytes

<!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>