Spaces:

appvoid
/

carbono

Running

App Files Files Community

appvoid commited on Nov 12, 2024

Commit

149fab1

verified ·

1 Parent(s): 1008b2a

Update index.html

Browse files

Files changed (1) hide show

index.html +899 -18

index.html CHANGED Viewed

@@ -1,19 +1,900 @@
-<!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>
+<head>
+  <title>Carbono UI</title>
+  <style>
+    a {
+      color: white;
+    }
+    body {
+      background: #000;
+      color: #fff;
+      font-family: monospace;
+      margin: 0;
+      padding: 15px;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      overflow-x: hidden;
+    }
+    h3 {
+      margin: 1.5rem;
+      margin-bottom: 0;
+    }
+    p {
+      margin: 1.5rem;
+      margin-top: 0rem;
+      color: #777;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(400px, 1fr) minmax(300px, 2fr);
+      gap: 15px;
+      opacity: 0;
+      transform: translateY(20px);
+      animation: fadeInUp 0.5s ease-out forwards;
+    }
+    .widget {
+      background: #000;
+      border-radius: 10px;
+      padding: 15px;
+      box-sizing: border-box;
+      width: 100%;
+      opacity: 0;
+      transform: translateY(20px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.2s;
+    }
+    .widget-title {
+      font-size: 1.1em;
+      margin-bottom: 12px;
+      border-bottom: 1px solid #333;
+      padding-bottom: 8px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.3s;
+    }
+    .input-group {
+      margin-bottom: 12px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.4s;
+    }
+    .settings-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 10px;
+      margin-bottom: 12px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.5s;
+    }
+    input[type="text"],
+    input[type="number"],
+    select,
+    textarea {
+      outline: none;
+      width: 100%;
+      padding: 6px;
+      background: #222;
+      border: 1px solid #444;
+      color: #fff;
+      border-radius: 8px;
+      margin-top: 4px;
+      box-sizing: border-box;
+      transition: background 0.3s, border 0.3s;
+    }
+    span {
+      background-color: white;
+      color: black;
+      font-weight: 600;
+      font-size: 12px;
+      padding: 1px;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+    input[type="text"]:focus,
+    input[type="number"]:focus,
+    select:focus,
+    textarea:focus {
+      background: #333;
+      border: 1px solid #666;
+    }
+    button {
+      background: #fff;
+      color: #000;
+      border: none;
+      padding: 6px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.1s ease;
+      border: 1px solid white;
+      opacity: 0;
+      height: 28px;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.6s;
+    }
+    button:hover {
+      border: 1px solid white;
+      color: white;
+      background: #000;
+    }
+    .progress-container {
+      height: 180px;
+      position: relative;
+      border: 1px solid #333;
+      border-radius: 8px;
+      margin-bottom: 10px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.7s;
+    }
+    .loss-graph {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .network-graph {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .flex-container {
+      display: flex;
+      gap: 20px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.8s;
+    }
+    .prediction-section,
+    .model-section {
+      flex: 1;
+    }
+    .button-group {
+      display: flex;
+      gap: 10px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 0.9s;
+    }
+    .visualization-container {
+      margin-top: 15px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: fadeInUp 0.5s ease-out forwards;
+      animation-delay: 1s;
+    }
+    .epoch-progress {
+      height: 5px;
+      background: #222;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .epoch-bar {
+      height: 100%;
+      width: 0;
+      background: #fff;
+      transition: width 0.3s ease;
+    }
+    @keyframes fadeInUp {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      .flex-container {
+        flex-direction: column;
+      }
+    }
+  </style>
+</head>
+<body>
+  <h3>playground</h3>
+  <p>this is a web app for showcasing carbono, a self-contained micro-library that makes it super easy to play, create and share small neural networks; it's the easiest, hackable machine learning js library; it's also convenient to quickly prototype on embedded devices. to download it and know more you can go to the <a href="https://github.com/appvoid/carbono" target="_blank">github repo</a>; you can see additional training details by opening the console; to load a dummy dataset, <span id="loadDataBtn">click here</span> and then click "train" button.</p>
+  <div class="grid">
+    <!-- Group 1: Data & Training -->
+    <div class="widget">
+      <div class="widget-title">model settings</div>
+      <div class="input-group">
+        <label>training set:</label>
+        <textarea id="trainingData" rows="3" placeholder="1,1,1,0
+1,0,1,0
+0,1,0,1"></textarea>
+      </div>
+      <p>last number represents actual desired output</p>
+      <div class="input-group">
+        <label>validation set:</label>
+        <textarea id="testData" rows="3" placeholder="0,0,0,1"></textarea>
+      </div>
+      <div class="settings-grid">
+        <div class="input-group">
+          <label>epochs:</label>
+          <input type="number" id="epochs" value="50">
+        </div>
+        <div class="input-group">
+          <label>learning rate:</label>
+          <input type="number" id="learningRate" value="0.1" step="0.001">
+        </div>
+        <div class="input-group">
+          <label>batch size:</label>
+          <input type="number" id="batchSize" value="8">
+        </div>
+        <div class="input-group">
+          <label>hidden layers:</label>
+          <input type="number" id="numHiddenLayers" value="1">
+        </div>
+      </div>
+      <!-- New UI Elements for Layer Configuration -->
+      <div id="hiddenLayersConfig"></div>
+    </div>
+    <!-- Group 2: Progress & Visualization -->
+    <div class="widget">
+      <div class="widget-title">training progress</div>
+      <div id="progress">
+        <div class="progress-container">
+          <canvas id="lossGraph" class="loss-graph"></canvas>
+        </div>
+        <p>training loss is white, validation loss is gray</p>
+        <div class="epoch-progress">
+          <div id="epochBar" class="epoch-bar"></div>
+        </div>
+        <div id="stats" style="margin-top: 10px;"></div>
+      </div>
+      <div class="model-section">
+        <br>
+        <div class="widget-title">model management</div>
+        <p>save the weights to load them on your app or share them on huggingface!</p>
+        <div class="button-group">
+          <button id="trainButton">train</button>
+          <button id="saveButton">save</button>
+          <button id="loadButton">load</button>
+          <div class="prediction-section">
+            <div class="widget-title">prediction</div>
+            <p>predict output</p>
+            <div class="input-group">
+              <label>input:</label>
+              <input type="text" id="predictionInput" placeholder="0.4, 0.2, 0.6">
+            </div>
+            <button id="predictButton">predict</button>
+            <div id="predictionResult" style="margin-top: 10px;"></div>
+          </div>
+          <div class="visualization-container">
+            <div class="widget-title">visualization</div>
+            <div class="progress-container">
+              <canvas id="networkGraph" class="network-graph"></canvas>
+            </div>
+            <p>internal model's representation</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 🧠 carbono: A Fun and Friendly Neural Network Class 🧠
+    // This micro-library wraps everything you need to have
+    // This is the simplest yet functional feedforward mlp in js
+    class carbono {
+      constructor(debug = true) {
+        this.layers = []; // 📚 Stores info about each layer
+        this.weights = []; // ⚖️ Stores weights for each layer
+        this.biases = []; // 🔧 Stores biases for each layer
+        this.activations = []; // 🚀 Stores activation functions for each layer
+        this.details = {}; // 📊 Stores details about the model
+        this.debug = debug; // 🐛 Enables or disables debug messages
+      }
+      // 🏗️ Add a new layer to the neural network
+      layer(inputSize, outputSize, activation = 'tanh') {
+        // 🧱 Store layer information
+        this.layers.push({
+          inputSize,
+          outputSize,
+          activation
+        });
+        // 🔍 Check if the new layer's input size matches the previous layer's output size
+        if (this.weights.length > 0) {
+          const lastLayerOutputSize = this.layers[this.layers.length - 2].outputSize;
+          if (inputSize !== lastLayerOutputSize) {
+            throw new Error('Oops! The input size of the new layer must match the output size of the previous layer.');
+          }
+        }
+        // 🎲 Initialize weights using Xavier/Glorot initialization
+        const weights = [];
+        for (let i = 0; i < outputSize; i++) {
+          const row = [];
+          for (let j = 0; j < inputSize; j++) {
+            row.push((Math.random() - 0.5) * 2 * Math.sqrt(6 / (inputSize + outputSize)));
+          }
+          weights.push(row);
+        }
+        this.weights.push(weights);
+        // 🎚️ Initialize biases with small positive values
+        const biases = Array(outputSize).fill(0.01);
+        this.biases.push(biases);
+        // 🚀 Store the activation function for this layer
+        this.activations.push(activation);
+      }
+      // 🧮 Apply the activation function
+      activationFunction(x, activation) {
+        switch (activation) {
+          case 'tanh':
+            return Math.tanh(x); // 〰️ Hyperbolic tangent
+          case 'sigmoid':
+            return 1 / (1 + Math.exp(-x)); // 📈 S-shaped curve
+          case 'relu':
+            return Math.max(0, x); // 📐 Rectified Linear Unit
+          case 'selu':
+            const alpha = 1.67326;
+            const scale = 1.0507;
+            return x > 0 ? scale * x : scale * alpha * (Math.exp(x) - 1); // 🚀 Scaled Exponential Linear Unit
+          default:
+            throw new Error('Whoops! We don\'t know that activation function.');
+        }
+      }
+      // 📐 Calculate the derivative of the activation function
+      activationDerivative(x, activation) {
+        switch (activation) {
+          case 'tanh':
+            return 1 - Math.pow(Math.tanh(x), 2);
+          case 'sigmoid':
+            const sigmoid = 1 / (1 + Math.exp(-x));
+            return sigmoid * (1 - sigmoid);
+          case 'relu':
+            return x > 0 ? 1 : 0;
+          case 'selu':
+            const alpha = 1.67326;
+            const scale = 1.0507;
+            return x > 0 ? scale : scale * alpha * Math.exp(x);
+          default:
+            throw new Error('Oops! We don\'t know the derivative of that activation function.');
+        }
+      }
+      // 🏋️‍♀️ Train the neural network
+      async train(trainSet, options = {}) {
+        // 🎛️ Set up training options with default values
+        const {
+          epochs = 200, // 🔄 Number of times to go through the entire dataset
+            learningRate = 0.212, // 📏 How big of steps to take when adjusting weights
+            batchSize = 16, // 📦 Number of samples to process before updating weights
+            printEveryEpochs = 100, // 🖨️ How often to print progress
+            earlyStopThreshold = 1e-6, // 🛑 When to stop if the error is small enough
+            testSet = null, // 🧪 Optional test set for evaluation
+            callback = null // 📡 Callback function for real-time updates
+        } = options;
+        const start = Date.now(); // ⏱️ Start the timer
+        // 🛡️ Make sure batch size is at least 2
+        if (batchSize < 1) batchSize = 2;
+        // 🏗️ Automatically create layers if none exist
+        if (this.layers.length === 0) {
+          const numInputs = trainSet[0].input.length;
+          this.layer(numInputs, numInputs, 'tanh');
+          this.layer(numInputs, 1, 'tanh');
+        }
+        let lastTrainLoss = 0;
+        let lastTestLoss = null;
+        // 🔄 Main training loop
+        for (let epoch = 0; epoch < epochs; epoch++) {
+          let trainError = 0;
+          // 📦 Process data in batches
+          for (let b = 0; b < trainSet.length; b += batchSize) {
+            const batch = trainSet.slice(b, b + batchSize);
+            let batchError = 0;
+            // 🧠 Forward pass and backward pass for each item in the batch
+            for (const data of batch) {
+              // 🏃‍♂️ Forward pass
+              const layerInputs = [data.input];
+              for (let i = 0; i < this.weights.length; i++) {
+                const inputs = layerInputs[i];
+                const weights = this.weights[i];
+                const biases = this.biases[i];
+                const activation = this.activations[i];
+                const outputs = [];
+                for (let j = 0; j < weights.length; j++) {
+                  const weight = weights[j];
+                  let sum = biases[j];
+                  for (let k = 0; k < inputs.length; k++) {
+                    sum += inputs[k] * weight[k];
+                  }
+                  outputs.push(this.activationFunction(sum, activation));
+                }
+                layerInputs.push(outputs);
+              }
+              // 🔙 Backward pass
+              const outputLayerIndex = this.weights.length - 1;
+              const outputLayerInputs = layerInputs[layerInputs.length - 1];
+              const outputErrors = [];
+              for (let i = 0; i < outputLayerInputs.length; i++) {
+                const error = data.output[i] - outputLayerInputs[i];
+                outputErrors.push(error);
+              }
+              let layerErrors = [outputErrors];
+              for (let i = this.weights.length - 2; i >= 0; i--) {
+                const nextLayerWeights = this.weights[i + 1];
+                const nextLayerErrors = layerErrors[0];
+                const currentLayerInputs = layerInputs[i + 1];
+                const currentActivation = this.activations[i];
+                const errors = [];
+                for (let j = 0; j < this.layers[i].outputSize; j++) {
+                  let error = 0;
+                  for (let k = 0; k < this.layers[i + 1].outputSize; k++) {
+                    error += nextLayerErrors[k] * nextLayerWeights[k][j];
+                  }
+                  errors.push(error * this.activationDerivative(currentLayerInputs[j], currentActivation));
+                }
+                layerErrors.unshift(errors);
+              }
+              // 🔧 Update weights and biases
+              for (let i = 0; i < this.weights.length; i++) {
+                const inputs = layerInputs[i];
+                const errors = layerErrors[i];
+                const weights = this.weights[i];
+                const biases = this.biases[i];
+                for (let j = 0; j < weights.length; j++) {
+                  const weight = weights[j];
+                  for (let k = 0; k < inputs.length; k++) {
+                    weight[k] += learningRate * errors[j] * inputs[k];
+                  }
+                  biases[j] += learningRate * errors[j];
+                }
+              }
+              batchError += Math.abs(outputErrors[0]); // Assuming binary output
+            }
+            trainError += batchError;
+          }
+          lastTrainLoss = trainError / trainSet.length;
+          // 🧪 Evaluate on test set if provided
+          if (testSet) {
+            let testError = 0;
+            for (const data of testSet) {
+              const prediction = this.predict(data.input);
+              testError += Math.abs(data.output[0] - prediction[0]);
+            }
+            lastTestLoss = testError / testSet.length;
+          }
+          // 📢 Print progress if needed
+          if ((epoch + 1) % printEveryEpochs === 0 && this.debug === true) {
+            console.log(`Epoch ${epoch + 1}, Train Loss: ${lastTrainLoss.toFixed(6)}${testSet ? `, Test Loss: ${lastTestLoss.toFixed(6)}` : ''}`);
+          }
+          // 📡 Call the callback function with current progress
+          if (callback) {
+            await callback(epoch + 1, lastTrainLoss, lastTestLoss);
+          }
+          // Add a small delay to prevent UI freezing
+          await new Promise(resolve => setTimeout(resolve, 0));
+          // 🛑 Check for early stopping
+          if (lastTrainLoss < earlyStopThreshold) {
+            console.log(`We stopped at epoch ${epoch + 1} with train loss: ${lastTrainLoss.toFixed(6)}${testSet ? ` and test loss: ${lastTestLoss.toFixed(6)}` : ''}`);
+            break;
+          }
+        }
+        const end = Date.now(); // ⏱️ Stop the timer
+        // 🧮 Calculate total number of parameters
+        let totalParams = 0;
+        for (let i = 0; i < this.weights.length; i++) {
+          const weightLayer = this.weights[i];
+          const biasLayer = this.biases[i];
+          totalParams += weightLayer.flat().length + biasLayer.length;
+        }
+        // 📊 Create a summary of the training
+        const trainingSummary = {
+          trainLoss: lastTrainLoss,
+          testLoss: lastTestLoss,
+          parameters: totalParams,
+          training: {
+            time: end - start,
+            epochs,
+            learningRate,
+            batchSize
+          },
+          layers: this.layers.map(layer => ({
+            inputSize: layer.inputSize,
+            outputSize: layer.outputSize,
+            activation: layer.activation
+          }))
+        };
+        this.details = trainingSummary;
+        return trainingSummary;
+      }
+      // 🔮 Use the trained network to make predictions
+      predict(input) {
+        let layerInput = input;
+        const allActivations = [input]; // Track all activations through layers
+        const allRawValues = []; // Track pre-activation values
+        for (let i = 0; i < this.weights.length; i++) {
+          const weights = this.weights[i];
+          const biases = this.biases[i];
+          const activation = this.activations[i];
+          const layerOutput = [];
+          const rawValues = [];
+          for (let j = 0; j < weights.length; j++) {
+            const weight = weights[j];
+            let sum = biases[j];
+            for (let k = 0; k < layerInput.length; k++) {
+              sum += layerInput[k] * weight[k];
+            }
+            rawValues.push(sum);
+            layerOutput.push(this.activationFunction(sum, activation));
+          }
+          allRawValues.push(rawValues);
+          allActivations.push(layerOutput);
+          layerInput = layerOutput;
+        }
+        // Store last activation values for visualization
+        this.lastActivations = allActivations;
+        this.lastRawValues = allRawValues;
+        return layerInput;
+      }
+      // 💾 Save the model to a file
+      save(name = 'model') {
+        const data = {
+          weights: this.weights,
+          biases: this.biases,
+          activations: this.activations,
+          layers: this.layers,
+          details: this.details
+        };
+        const blob = new Blob([JSON.stringify(data)], {
+          type: 'application/json'
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${name}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+      // 📂 Load a saved model from a file
+      load(callback) {
+        const handleListener = (event) => {
+          const file = event.target.files[0];
+          if (!file) return;
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            const text = event.target.result;
+            try {
+              const data = JSON.parse(text);
+              this.weights = data.weights;
+              this.biases = data.biases;
+              this.activations = data.activations;
+              this.layers = data.layers;
+              this.details = data.details;
+              callback();
+              if (this.debug === true) console.log('Model loaded successfully!');
+              input.removeEventListener('change', handleListener);
+              input.remove();
+            } catch (e) {
+              input.removeEventListener('change', handleListener);
+              input.remove();
+              if (this.debug === true) console.error('Failed to load model:', e);
+            }
+          };
+          reader.readAsText(file);
+        };
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json';
+        input.style.opacity = '0';
+        document.body.append(input);
+        input.addEventListener('change', handleListener.bind(this));
+        input.click();
+      }
+    }
+    document.getElementById("loadDataBtn").onclick = () => {
+      document.getElementById('trainingData').value = `1.0, 0.0, 0.0, 0.0
+0.7, 0.7, 0.8, 1
+0.0, 1.0, 0.0, 0.5`
+      document.getElementById('testData').value = `0.4, 0.2, 0.6, 1.0
+0.2, 0.82, 0.83, 1.0`
+    }
+    // Interface code
+    const nn = new carbono();
+    let lossHistory = [];
+    const ctx = document.getElementById('lossGraph').getContext('2d');
+    function parseCSV(csv) {
+      return csv.trim().split('\n').map(row => {
+        const values = row.split(',').map(Number);
+        return {
+          input: values.slice(0, -1),
+          output: [values[values.length - 1]]
+        };
+      });
+    }
+    function drawLossGraph() {
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      const width = ctx.canvas.width;
+      const height = ctx.canvas.height;
+      // Combine train and test losses to find overall max for scaling
+      const maxLoss = Math.max(
+        ...lossHistory.map(loss => Math.max(loss.train, loss.test || 0))
+      );
+      // Draw training loss (white line)
+      ctx.strokeStyle = '#fff';
+      ctx.beginPath();
+      lossHistory.forEach((loss, i) => {
+        const x = (i / (lossHistory.length - 1)) * width;
+        const y = height - (loss.train / maxLoss) * height;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.stroke();
+      // Draw test loss (gray line)
+      ctx.strokeStyle = '#777';
+      ctx.beginPath();
+      lossHistory.forEach((loss, i) => {
+        if (loss.test !== undefined) {
+          const x = (i / (lossHistory.length - 1)) * width;
+          const y = height - (loss.test / maxLoss) * height;
+          if (i === 0 || lossHistory[i - 1].test === undefined) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+      });
+      ctx.stroke();
+    }
+    function createLayerConfigUI(numLayers) {
+      const container = document.getElementById('hiddenLayersConfig');
+      container.innerHTML = ''; // Clear previous UI
+      for (let i = 0; i < numLayers; i++) {
+        const group = document.createElement('div');
+        group.className = 'input-group';
+        const label = document.createElement('label');
+        label.textContent = `layer ${i + 1} nodes:`;
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.value = 5;
+        input.dataset.layerIndex = i;
+        const activationLabel = document.createElement('label');
+        activationLabel.innerHTML = `<br>activation:`;
+        const activationSelect = document.createElement('select');
+        const activations = ['tanh', 'sigmoid', 'relu', 'selu'];
+        activations.forEach(act => {
+          const option = document.createElement('option');
+          option.value = act;
+          option.textContent = act;
+          activationSelect.appendChild(option);
+        });
+        activationSelect.dataset.layerIndex = i;
+        group.appendChild(label);
+        group.appendChild(input);
+        group.appendChild(activationLabel);
+        group.appendChild(activationSelect);
+        container.appendChild(group);
+      }
+    }
+    document.getElementById('numHiddenLayers').addEventListener('change', (event) => {
+      const numLayers = parseInt(event.target.value);
+      createLayerConfigUI(numLayers);
+    });
+    createLayerConfigUI(document.getElementById('numHiddenLayers').value);
+    document.getElementById('trainButton').addEventListener('click', async () => {
+      lossHistory = []; // Initialize as empty array
+      const trainingData = parseCSV(document.getElementById('trainingData').value);
+      const testData = parseCSV(document.getElementById('testData').value);
+      lossHistory = [];
+      document.getElementById('stats').innerHTML = '';
+      const numHiddenLayers = parseInt(document.getElementById('numHiddenLayers').value);
+      const layerConfigs = [];
+      for (let i = 0; i < numHiddenLayers; i++) {
+        const sizeInput = document.querySelector(`input[data-layer-index="${i}"]`);
+        const activationSelect = document.querySelector(`select[data-layer-index="${i}"]`);
+        layerConfigs.push({
+          size: parseInt(sizeInput.value),
+          activation: activationSelect.value
+        });
+      }
+      nn.layers = []; // Reset layers
+      nn.weights = [];
+      nn.biases = [];
+      nn.activations = [];
+      const numInputs = trainingData[0].input.length;
+      nn.layer(numInputs, layerConfigs[0].size, layerConfigs[0].activation);
+      for (let i = 1; i < layerConfigs.length; i++) {
+        nn.layer(layerConfigs[i - 1].size, layerConfigs[i].size, layerConfigs[i].activation);
+      }
+      nn.layer(layerConfigs[layerConfigs.length - 1].size, 1, 'tanh'); // Output layer
+      const options = {
+        epochs: parseInt(document.getElementById('epochs').value),
+        learningRate: parseFloat(document.getElementById('learningRate').value),
+        batchSize: parseInt(document.getElementById('batchSize').value),
+        printEveryEpochs: 1,
+        testSet: testData.length > 0 ? testData : null,
+        callback: async (epoch, trainLoss, testLoss) => {
+          lossHistory.push({
+            train: trainLoss,
+            test: testLoss
+          });
+          drawLossGraph();
+          document.getElementById('epochBar').style.width =
+            `${(epoch / options.epochs) * 100}%`;
+          document.getElementById('stats').innerHTML =
+            `<p>• current epoch: ${epoch}/${options.epochs}` +
+            `<br> • train/val loss: ${trainLoss.toFixed(6)}` +
+            (testLoss ? ` | ${testLoss.toFixed(6)}</p>` : '');
+        }
+      }
+      try {
+        const trainButton = document.getElementById('trainButton');
+        trainButton.disabled = true;
+        trainButton.textContent = 'training...';
+        const summary = await nn.train(trainingData, options);
+        trainButton.disabled = false;
+        trainButton.textContent = 'train';
+        // Display final summary
+        document.getElementById('stats').innerHTML += '<strong>Model trained</strong>';
+      } catch (error) {
+        console.error('Training error:', error);
+        document.getElementById('trainButton').disabled = false;
+        document.getElementById('trainButton').textContent = 'train';
+      }
+    });
+    function drawNetwork() {
+      const canvas = document.getElementById('networkGraph');
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (!nn.lastActivations) return; // Don't draw if no predictions made yet
+      const padding = 40;
+      const width = canvas.width - padding * 2;
+      const height = canvas.height - padding * 2;
+      // Calculate node positions
+      const layerPositions = [];
+      // Add input layer explicitly
+      const inputLayer = [];
+      const inputX = padding;
+      const inputSize = nn.layers[0].inputSize;
+      for (let i = 0; i < inputSize; i++) {
+        const inputY = padding + (height * i) / (inputSize - 1);
+        inputLayer.push({
+          x: inputX,
+          y: inputY,
+          value: nn.lastActivations[0][i]
+        });
+      }
+      layerPositions.push(inputLayer);
+      // Add hidden layers
+      for (let i = 1; i < nn.lastActivations.length - 1; i++) {
+        const layer = nn.lastActivations[i];
+        const layerNodes = [];
+        const layerX = padding + (width * i) / (nn.lastActivations.length - 1);
+        for (let j = 0; j < layer.length; j++) {
+          const nodeY = padding + (height * j) / (layer.length - 1);
+          layerNodes.push({
+            x: layerX,
+            y: nodeY,
+            value: layer[j]
+          });
+        }
+        layerPositions.push(layerNodes);
+      }
+      // Add output layer explicitly
+      const outputLayer = [];
+      const outputX = canvas.width - padding;
+      const outputY = padding + height / 2; // Center the output node
+      outputLayer.push({
+        x: outputX,
+        y: outputY,
+        value: nn.lastActivations[nn.lastActivations.length - 1][0]
+      });
+      layerPositions.push(outputLayer);
+      // Draw connections
+      ctx.lineWidth = 1;
+      for (let i = 0; i < layerPositions.length - 1; i++) {
+        const currentLayer = layerPositions[i];
+        const nextLayer = layerPositions[i + 1];
+        const weights = nn.weights[i];
+        for (let j = 0; j < currentLayer.length; j++) {
+          const nextLayerSize = nextLayer.length;
+          for (let k = 0; k < nextLayerSize; k++) {
+            const weight = weights[k][j];
+            const signal = Math.abs(currentLayer[j].value * weight);
+            const opacity = Math.min(Math.max(signal, 0.01), 1);
+            ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`;
+            ctx.beginPath();
+            ctx.moveTo(currentLayer[j].x, currentLayer[j].y);
+            ctx.lineTo(nextLayer[k].x, nextLayer[k].y);
+            ctx.stroke();
+          }
+        }
+      }
+      // Draw nodes
+      for (const layer of layerPositions) {
+        for (const node of layer) {
+          const value = Math.abs(node.value);
+          const radius = 4;
+          // Node fill
+          ctx.fillStyle = `rgba(255, 255, 255, ${Math.min(Math.max(value, 0.2), 1)})`;
+          ctx.beginPath();
+          ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
+          ctx.fill();
+          // Node border
+          ctx.strokeStyle = 'rgba(255, 255, 255, 1.0)';
+          ctx.lineWidth = 1;
+          ctx.stroke();
+        }
+      }
+    }
+    // Modify the predict button event listener
+    document.getElementById('predictButton').addEventListener('click', () => {
+      const input = document.getElementById('predictionInput').value
+        .split(',').map(Number);
+      const prediction = nn.predict(input);
+      document.getElementById('predictionResult').innerHTML =
+        `Prediction: ${prediction[0].toFixed(6)}`;
+      drawNetwork(); // Draw the network visualization
+    });
+    // Add network canvas resize handling
+    function resizeCanvases() {
+      const lossCanvas = document.getElementById('lossGraph');
+      const networkCanvas = document.getElementById('networkGraph');
+      lossCanvas.width = lossCanvas.parentElement.clientWidth;
+      lossCanvas.height = lossCanvas.parentElement.clientHeight;
+      networkCanvas.width = networkCanvas.parentElement.clientWidth;
+      networkCanvas.height = networkCanvas.parentElement.clientHeight;
+      drawNetwork(); // Redraw network when canvas is resized
+    }
+    window.addEventListener('resize', resizeCanvases);
+    resizeCanvases();
+    // Save button functionality
+    document.getElementById('saveButton').addEventListener('click', () => {
+      nn.save('model');
+    });
+    // Load button functionality
+    document.getElementById('loadButton').addEventListener('click', () => {
+      nn.load(() => {
+        console.log('Model loaded successfully!');
+        // Optionally, you can add a message to the UI indicating that the model has been loaded
+        document.getElementById('stats').innerHTML += '<p><strong>Model loaded successfully!</strong></p>';
+      });
+    });
+  </script>
+</body>
+</html>