Spaces:

appvoid
/

carbono

Running

File size: 32,663 Bytes

<!DOCTYPE html>
<html>

<head>
  <title>Carbono UI</title>
  <style>
    a {
      color: white;
    }

    body {
      background: #000;
      color: #fff;
      font-family: monospace;
      margin: 0;
      padding-top: 16px;
      padding: 5%;
      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>