Spaces:
Running
Running
| <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> | |