Spaces:

appvoid
/

carbono

Running

App Files Files Community

appvoid commited on Oct 23

Commit

bf15f41

verified ·

1 Parent(s): d5a9bbf

Update index.html

Browse files

Files changed (1) hide show

index.html +404 -791

index.html CHANGED Viewed

@@ -1,840 +1,453 @@
 <!DOCTYPE html>
-<html>
 <head>
-  <title>Carbono UI - Enhanced</title>
   <style>
-    :root {
-      --primary-color: #fff;
-      --secondary-color: #000;
-      --tertiary-color: #777;
-      --background-color: #000;
-      --widget-background: #111;
-      --border-color: #333;
-      --input-background: #222;
-      --input-focus-background: #333;
-      --button-hover-background: #000;
-      --font-family: monospace;
-    }
-    a {
-      color: var(--primary-color);
-    }
-    body {
-      background: var(--background-color);
-      color: var(--primary-color);
-      font-family: var(--font-family);
-      margin: 0;
-      padding: 2%;
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-    }
-    h3 {
-      margin: 1rem 0;
-    }
-    p {
-      margin: 0 0 1rem 0;
-      color: var(--tertiary-color);
-      line-height: 1.5;
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 15px;
-    }
-    @media (min-width: 768px) {
-      .grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-    .widget {
-      background: var(--widget-background);
-      border-radius: 10px;
-      padding: 20px;
-      box-sizing: border-box;
-    }
-    .widget-title {
-      font-size: 1.2em;
-      margin-bottom: 15px;
-      border-bottom: 1px solid var(--border-color);
-      padding-bottom: 10px;
-    }
-    .input-group {
-      margin-bottom: 15px;
-    }
-    .settings-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 15px;
-      margin-bottom: 15px;
-    }
-    input[type="text"],
-    input[type="number"],
-    select,
-    textarea {
-      outline: none;
-      width: 100%;
-      padding: 8px;
-      background: var(--input-background);
-      border: 1px solid var(--border-color);
-      color: var(--primary-color);
-      border-radius: 8px;
-      margin-top: 5px;
-      box-sizing: border-box;
-      transition: background 0.3s, border 0.3s;
-    }
-    span#loadDataBtn {
-      background-color: var(--primary-color);
-      color: var(--secondary-color);
-      font-weight: 600;
-      font-size: 12px;
-      padding: 2px 4px;
-      border-radius: 3px;
-      cursor: pointer;
-    }
-    input[type="text"]:focus,
-    input[type="number"]:focus,
-    select:focus,
-    textarea:focus {
-      background: var(--input-focus-background);
-      border-color: var(--primary-color);
-    }
-    button {
-      background: var(--primary-color);
-      color: var(--secondary-color);
-      border: 1px solid var(--primary-color);
-      padding: 8px 15px;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-    button:hover,
-    button:disabled {
-      background: var(--button-hover-background);
-      color: var(--primary-color);
-    }
-     button:disabled {
-      cursor: not-allowed;
-      opacity: 0.7;
-    }
-    .progress-container {
-      height: 180px;
-      position: relative;
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      margin-bottom: 10px;
-    }
-    .graph {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .button-group {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
-    .epoch-progress {
-      height: 5px;
-      background: #222;
-      border-radius: 8px;
-      overflow: hidden;
-      margin-top: 10px;
-    }
-    .epoch-bar {
-      height: 100%;
-      width: 0;
-      background: var(--primary-color);
-      transition: width 0.3s ease;
     }
   </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. 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 the "Train" button.</p>
-  <div class="grid">
-    <div class="widget">
-      <div class="widget-title">Model Settings</div>
-      <div class="input-group">
-        <label>Training Set:</label>
-        <textarea id="trainingData" rows="4" placeholder="1,1,1,0\n1,0,1,0\n0,1,0,1"></textarea>
-        <p>Last number represents the desired output.</p>
-      </div>
-      <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>
-      <div id="hiddenLayersConfig"></div>
-    </div>
-    <div class="widget">
-      <div class="widget-title">Training Progress</div>
-      <div class="progress-container">
-        <canvas id="lossGraph" class="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 class="widget-title" style="margin-top: 20px;">Model Management</div>
-      <p>Save the weights to load them in your app or share them on Hugging Face!</p>
-      <div class="button-group">
-        <button id="trainButton">Train</button>
-        <button id="saveButton">Save</button>
-        <button id="loadButton">Load</button>
-      </div>
-      <div class="widget-title" style="margin-top: 20px;">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 class="widget-title" style="margin-top: 20px;">Visualization</div>
-       <div class="progress-container">
-        <canvas id="networkGraph" class="graph"></canvas>
-      </div>
-       <p>Internal model's representation.</p>
     </div>
   </div>
   <script>
-    // Carbono library code remains the same...
-    class carbono {
-  constructor(debug = true) {
-    this.layers = [];
-    this.weights = [];
-    this.biases = [];
-    this.activations = [];
-    this.details = {};
-    this.debug = debug;
-  }
-  // Add a new layer to the neural network
-  layer(inputSize, outputSize, activation = 'tanh') {
-    this.layers.push({
-      inputSize,
-      outputSize,
-      activation
-    });
-    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.');
-      }
-    }
-    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);
-    const biases = Array(outputSize).fill(0.01);
-    this.biases.push(biases);
-    this.activations.push(activation);
-  }
-  // Apply the activation function
-  activationFunction(x, activation) {
-    switch (activation) {
-      case 'tanh':
-        return Math.tanh(x);
-      case 'sigmoid':
-        return 1 / (1 + Math.exp(-x));
-      case 'relu':
-        return Math.max(0, x);
-      case 'selu':
-        const alpha = 1.67326;
-        const scale = 1.0507;
-        return x > 0 ? scale * x : scale * alpha * (Math.exp(x) - 1);
-      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.');
-    }
-  }
-  // Positional Encoding
-  positionalEncoding(input, maxLen) {
-    const pe = new Array(maxLen).fill(0).map((_, pos) => {
-      return new Array(input[0].length).fill(0).map((_, i) => {
-        const angle = pos / Math.pow(10000, 2 * i / input[0].length);
-        return pos % 2 === 0 ? Math.sin(angle) : Math.cos(angle);
-      });
-    });
-    return input.map((seq, idx) => seq.map((val, i) => val + pe[idx][i]));
-  }
-  // Simplified Multi-Head Self-Attention
-  multiHeadSelfAttention(input, numHeads = 2) {
-    const headSize = input[0].length / numHeads;
-    const heads = new Array(numHeads).fill(0).map(() => new Array(input.length).fill(0).map(() => new Array(headSize).fill(0)));
-    for (let h = 0; h < numHeads; h++) {
-      for (let i = 0; i < input.length; i++) {
-        for (let j = 0; j < headSize; j++) {
-          heads[h][i][j] = input[i][h * headSize + j];
-        }
-      }
-    }
-    const attentionScores = new Array(numHeads).fill(0).map(() => new Array(input.length).fill(0).map(() => new Array(input.length).fill(0)));
-    for (let h = 0; h < numHeads; h++) {
-      for (let i = 0; i < input.length; i++) {
-        for (let j = 0; j < input.length; j++) {
-          let score = 0;
-          for (let k = 0; k < headSize; k++) {
-            score += heads[h][i][k] * heads[h][j][k];
-          }
-          attentionScores[h][i][j] = score;
-        }
-      }
-    }
-    const attentionWeights = attentionScores.map(head => head.map(row => row.map(score => Math.exp(score) / row.reduce((sum, s) => sum + Math.exp(s), 0))));
-    const output = new Array(input.length).fill(0).map(() => new Array(input[0].length).fill(0));
-    for (let h = 0; h < numHeads; h++) {
-      for (let i = 0; i < input.length; i++) {
-        for (let j = 0; j < headSize; j++) {
-          for (let k = 0; k < input.length; k++) {
-            output[i][h * headSize + j] += attentionWeights[h][i][k] * heads[h][k][j];
-          }
-        }
-      }
-    }
-    return output;
   }
-  // Layer Normalization
-  layerNormalization(input) {
-    const mean = input.reduce((sum, val) => sum + val, 0) / input.length;
-    const variance = input.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / input.length;
-    return input.map(val => (val - mean) / Math.sqrt(variance + 1e-5));
   }
-  // Train the neural network
-  async train(trainSet, options = {}) {
-    const {
-      epochs = 200,
-      learningRate = 0.212,
-      batchSize = 16,
-      printEveryEpochs = 100,
-      earlyStopThreshold = 1e-6,
-      testSet = null,
-      callback = null
-    } = options;
-    const start = Date.now();
-    if (batchSize < 1) batchSize = 2;
-    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;
-    for (let epoch = 0; epoch < epochs; epoch++) {
-      let trainError = 0;
-      for (let b = 0; b < trainSet.length; b += batchSize) {
-        const batch = trainSet.slice(b, b + batchSize);
-        let batchError = 0;
-        for (const data of batch) {
-          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);
-          }
-          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);
           }
-          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]);
         }
-        trainError += batchError;
       }
-      lastTrainLoss = trainError / trainSet.length;
-      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;
-      }
-      if ((epoch + 1) % printEveryEpochs === 0 && this.debug === true) {
-        console.log(`Epoch ${epoch + 1}, Train Loss: ${lastTrainLoss.toFixed(6)}${testSet ? `, Test Loss: ${lastTestLoss.toFixed(6)}` : ''}`);
-      }
-      if (callback) {
-        await callback(epoch + 1, lastTrainLoss, lastTestLoss);
-      }
-      await new Promise(resolve => setTimeout(resolve, 0));
-      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();
-    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;
-    }
-    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];
-    const allRawValues = [];
-    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;
     }
-    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.addEventListener('DOMContentLoaded', () => {
-      const nn = new carbono();
-      let lossHistory = [];
-      const lossCanvas = document.getElementById('lossGraph');
-      const networkCanvas = document.getElementById('networkGraph');
-      const lossCtx = lossCanvas.getContext('2d');
-      const elements = {
-        loadDataBtn: document.getElementById('loadDataBtn'),
-        trainingData: document.getElementById('trainingData'),
-        testData: document.getElementById('testData'),
-        numHiddenLayers: document.getElementById('numHiddenLayers'),
-        hiddenLayersConfig: document.getElementById('hiddenLayersConfig'),
-        trainButton: document.getElementById('trainButton'),
-        stats: document.getElementById('stats'),
-        epochBar: document.getElementById('epochBar'),
-        epochs: document.getElementById('epochs'),
-        learningRate: document.getElementById('learningRate'),
-        batchSize: document.getElementById('batchSize'),
-        predictButton: document.getElementById('predictButton'),
-        predictionInput: document.getElementById('predictionInput'),
-        predictionResult: document.getElementById('predictionResult'),
-        saveButton: document.getElementById('saveButton'),
-        loadButton: document.getElementById('loadButton')
-      };
-      const 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]]
-          };
-        });
-      }
-      const drawLossGraph = () => {
-        const {
-          width,
-          height
-        } = lossCanvas;
-        lossCtx.clearRect(0, 0, width, height);
-        const maxLoss = Math.max(...lossHistory.map(loss => Math.max(loss.train, loss.test || 0)));
-        const drawLine = (data, color) => {
-          lossCtx.strokeStyle = color;
-          lossCtx.beginPath();
-          data.forEach((val, i) => {
-            const x = (i / (data.length - 1)) * width;
-            const y = height - (val / maxLoss) * height;
-            if (i === 0) lossCtx.moveTo(x, y);
-            else lossCtx.lineTo(x, y);
-          });
-          lossCtx.stroke();
-        };
-        drawLine(lossHistory.map(l => l.train), 'white');
-        if (lossHistory.some(l => l.test !== undefined)) {
-          drawLine(lossHistory.map(l => l.test), '#777');
-        }
-      }
-      const createLayerConfigUI = (numLayers) => {
-        elements.hiddenLayersConfig.innerHTML = '';
-        for (let i = 0; i < numLayers; i++) {
-          const group = document.createElement('div');
-          group.className = 'input-group settings-grid';
-          group.innerHTML = `
-            <div>
-              <label>Layer ${i + 1} Nodes:</label>
-              <input type="number" value="5" data-layer-index="${i}">
-            </div>
-            <div>
-              <label>Activation:</label>
-              <select data-layer-index="${i}">
-                <option>tanh</option>
-                <option>sigmoid</option>
-                <option>relu</option>
-                <option>selu</option>
-              </select>
-            </div>
-          `;
-          elements.hiddenLayersConfig.appendChild(group);
-        }
-      }
-      const trainModel = async () => {
-        lossHistory = [];
-        const trainingData = parseCSV(elements.trainingData.value);
-        const testData = parseCSV(elements.testData.value);
-        elements.stats.innerHTML = '';
-        const numHiddenLayers = parseInt(elements.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 = [];
-        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');
-        const options = {
-          epochs: parseInt(elements.epochs.value),
-          learningRate: parseFloat(elements.learningRate.value),
-          batchSize: parseInt(elements.batchSize.value),
-          printEveryEpochs: 1,
-          testSet: testData.length > 0 ? testData : null,
-          callback: async (epoch, trainLoss, testLoss) => {
-            lossHistory.push({
-              train: trainLoss,
-              test: testLoss
-            });
-            drawLossGraph();
-            elements.epochBar.style.width = `${(epoch / options.epochs) * 100}%`;
-            elements.stats.innerHTML = `<p>Epoch: ${epoch}/${options.epochs}<br>Train/Val Loss: ${trainLoss.toFixed(6)}${testLoss ? ` | ${testLoss.toFixed(6)}` : ''}</p>`;
-          }
-        }
-        try {
-          elements.trainButton.disabled = true;
-          elements.trainButton.textContent = 'Training...';
-          await nn.train(trainingData, options);
-          elements.stats.innerHTML += '<strong>Model trained</strong>';
-        } catch (error) {
-          console.error('Training error:', error);
-        } finally {
-          elements.trainButton.disabled = false;
-          elements.trainButton.textContent = 'Train';
-        }
       }
-      function drawNetwork() {
-        const ctx = networkCanvas.getContext('2d');
-        ctx.clearRect(0, 0, networkCanvas.width, networkCanvas.height);
-        if (!nn.lastActivations) return;
-        const padding = 40;
-        const width = networkCanvas.width - padding * 2;
-        const height = networkCanvas.height - padding * 2;
-        const layerPositions = [];
-        const inputLayer = [];
-        const inputX = padding;
-        const inputSize = nn.layers[0].inputSize;
-        for (let i = 0; i < inputSize; i++) {
-          const inputY = padding + (inputSize > 1 ? (height * i) / (inputSize - 1) : height / 2);
-          inputLayer.push({ x: inputX, y: inputY, value: nn.lastActivations[0][i] });
-        }
-        layerPositions.push(inputLayer);
-        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 + (layer.length > 1 ? (height * j) / (layer.length - 1) : height / 2);
-            layerNodes.push({ x: layerX, y: nodeY, value: layer[j] });
-          }
-          layerPositions.push(layerNodes);
-        }
-        const outputLayer = [];
-        const outputX = networkCanvas.width - padding;
-        const outputY = padding + height / 2;
-        outputLayer.push({ x: outputX, y: outputY, value: nn.lastActivations[nn.lastActivations.length - 1][0] });
-        layerPositions.push(outputLayer);
-        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++) {
-            for (let k = 0; k < nextLayer.length; 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();
-            }
-          }
-        }
-        for (const layer of layerPositions) {
-          for (const node of layer) {
-            const value = Math.abs(node.value);
-            const radius = 4;
-            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();
-            ctx.strokeStyle = 'rgba(255, 255, 255, 1.0)';
-            ctx.lineWidth = 1;
-            ctx.stroke();
-          }
-        }
-      }
-      function resizeCanvases() {
-        [lossCanvas, networkCanvas].forEach(canvas => {
-          canvas.width = canvas.parentElement.clientWidth;
-          canvas.height = canvas.parentElement.clientHeight;
-        });
-        drawNetwork();
       }
-      elements.loadDataBtn.onclick = () => {
-        elements.trainingData.value = `1.0, 0.0, 0.0, 0.0\n0.7, 0.7, 0.8, 1\n0.0, 1.0, 0.0, 0.5`;
-        elements.testData.value = `0.4, 0.2, 0.6, 1.0\n0.2, 0.82, 0.83, 1.0`;
-      };
-      elements.numHiddenLayers.addEventListener('change', (e) => createLayerConfigUI(parseInt(e.target.value)));
-      elements.trainButton.addEventListener('click', trainModel);
-      elements.predictButton.addEventListener('click', () => {
-        const input = elements.predictionInput.value.split(',').map(Number);
-        const prediction = nn.predict(input);
-        elements.predictionResult.innerHTML = `Prediction: ${prediction[0].toFixed(6)}`;
-        drawNetwork();
-      });
-      elements.saveButton.addEventListener('click', () => nn.save('model'));
-      elements.loadButton.addEventListener('click', () => {
-        nn.load(() => {
-          elements.stats.innerHTML += '<p><strong>Model loaded successfully!</strong></p>';
-        });
-      });
-      window.addEventListener('resize', resizeCanvases);
-      createLayerConfigUI(parseInt(elements.numHiddenLayers.value));
-      resizeCanvases();
-    });
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="utf-8" />
+  <title>Carbono UI — Minimal Mono</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
+    :root{
+      --fg:#fff;--bg:#000;--muted:#8a8a8a;--panel:#0e0e0e;--line:#222;--ink:#111;--ink2:#1a1a1a;
+      --radius:6px;--pad:10px;--fs:12px;--lh:1.25;--gap:10px;
+      --base-w:1200; /* logical pixels for layout before scaling */
+      --base-h:680;
+    }
+    /* reset */
+    *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+    html,body{height:100%;background:var(--bg);color:var(--fg);margin:0}
+    a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
+    a:hover{border-bottom-color:var(--fg)}
+    /* fit-to-viewport wrapper (no scroll) */
+    body{display:flex;align-items:center;justify-content:center;overflow:hidden}
+    #fit{
+      width:calc(var(--base-w)*1px);
+      height:calc(var(--base-h)*1px);
+      transform-origin: center; /* <<< FIX: Was 'top left', now it scales from the center */
+      display:flex;flex-direction:column;gap:var(--gap);
+      font:500 var(--fs)/var(--lh) ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace;
+      letter-spacing:.1px;font-variant-numeric:tabular-nums;
+    }
+    /* top bar */
+    .top{
+      display:grid;grid-template-columns:1fr auto auto;gap:var(--gap);
+      align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)
+    }
+    .brand{text-transform:uppercase;letter-spacing:.5px;font-weight:700}
+    .muted{color:var(--muted)}
+    .chip{background:var(--fg);color:var(--bg);padding:2px 6px;border-radius:999px;cursor:pointer;user-select:none}
+    /* layout grid */
+    .grid{
+      display:grid;gap:var(--gap);
+      grid-template-columns: 3.5fr 3.5fr 3fr; /* L / M / R */
+      grid-template-rows: 1fr;
+      height:100%;
+    }
+    .panel{
+      display:flex;flex-direction:column;gap:var(--gap);
+      border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--ink));
+      padding:var(--pad);
+    }
+    .block{border:1px solid var(--line);border-radius:var(--radius);background:var(--ink2);padding:8px}
+    .title{
+      font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px 0;
+      padding-bottom:6px;border-bottom:1px solid var(--line)
+    }
+    /* compact form */
+    label{display:block;margin-bottom:4px;color:var(--muted)}
+    .row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
+    .input,textarea,select{
+      width:100%;background:#141414;border:1px solid var(--line);color:var(--fg);
+      padding:6px;border-radius:4px;outline:none;transition:border-color .15s ease;
+    }
+    .input:focus,textarea:focus,select:focus{border-color:#fff}
+    textarea{resize:none}
+    /* controls */
+    .btns{display:flex;gap:6px;flex-wrap:wrap}
+    button{
+      height:26px;line-height:24px;padding:0 10px;border-radius:4px;border:1px solid #fff;background:#fff;color:#000;
+      cursor:pointer;transition:filter .15s ease
+    }
+    button:hover{filter:brightness(.9)}
+    button:disabled{opacity:.6;cursor:not-allowed;filter:none}
+    /* canvases */
+    .canvas-wrap{height:170px;border:1px solid var(--line);border-radius:4px;position:relative;background:#0a0a0a}
+    canvas{position:absolute;inset:0;width:100%;height:100%}
+    /* progress bar */
+    .bar{height:4px;border-radius:999px;background:#161616;overflow:hidden}
+    .bar>i{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}
+    /* small text blocks */
+    .hint{color:var(--muted);margin:4px 0 0 0}
+    .stat{display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
+    .stat b{color:#fff}
+    /* two-up prediction area */
+    .pred{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
+    /* hide scrollbars anywhere just in case */
+    .panel,.block{overflow:hidden}
+    @media (max-width:900px){
+      /* fallback: stack but still scaled to fit by transformer */
+      .grid{grid-template-columns:1fr}
+    }
+    @media (prefers-reduced-motion:reduce){
+      *{animation:none!important;transition:none!important}
     }
   </style>
 </head>
 <body>
+  <div id="fit">
+    <div class="top">
+      <div class="brand">Carbono Playground</div>
+      <div class="muted">Learning. Simple. Visual.</div>
+      <span id="loadDataBtn" class="chip">Load sample</span>
+    </div>
+    <div class="grid">
+      <!-- LEFT: Model Settings -->
+      <section class="panel" aria-label="Model Settings">
+        <h4 class="title">Model</h4>
+        <div class="block">
+          <label>Training Set</label>
+          <textarea id="trainingData" rows="3" placeholder="1,1,1,0&#10;1,0,1,0&#10;0,1,0,1"></textarea>
+          <div class="hint">Last number is target.</div>
         </div>
+        <div class="row">
+          <div class="block">
+            <label>Epochs</label>
+            <input class="input" type="number" id="epochs" value="50" />
+          </div>
+          <div class="block">
+            <label>LR</label>
+            <input class="input" type="number" id="learningRate" value="0.1" step="0.001" />
+          </div>
+          <div class="block">
+            <label>Batch</label>
+            <input class="input" type="number" id="batchSize" value="8" />
+          </div>
+          <div class="block">
+            <label>Hidden</label>
+            <input class="input" type="number" id="numHiddenLayers" value="1" min="1" max="4" />
+          </div>
         </div>
+        <div id="hiddenLayersConfig" class="block"></div>
+        <div class="block">
+          <label>Validation Set</label>
+          <textarea id="testData" rows="2" placeholder="0,0,0,1"></textarea>
         </div>
+      </section>
+      <!-- MIDDLE: Training / Viz -->
+      <section class="panel" aria-label="Training & Visualization">
+        <h4 class="title">Training</h4>
+        <div class="canvas-wrap"><canvas id="lossGraph"></canvas></div>
+        <div class="hint">Loss: white = train, gray = val.</div>
+        <div class="bar"><i id="epochBar"></i></div>
+        <div id="stats" class="block stat"></div>
+        <h4 class="title">Visualization</h4>
+        <div class="canvas-wrap"><canvas id="networkGraph"></canvas></div>
+        <div class="hint">Internal representation.</div>
+      </section>
+      <!-- RIGHT: Control / Predict -->
+      <section class="panel" aria-label="Control">
+        <h4 class="title">Control</h4>
+        <div class="block btns">
+          <button id="trainButton">Train</button>
+          <button id="saveButton">Save</button>
+          <button id="loadButton">Load</button>
         </div>
+        <h4 class="title">Predict</h4>
+        <div class="block pred">
+          <input class="input" type="text" id="predictionInput" placeholder="0.4, 0.2, 0.6" />
+          <button id="predictButton">Predict</button>
+        </div>
+        <div id="predictionResult" class="block"></div>
+        <div class="block">
+          <div class="hint">Repo: <a href="https://github.com/appvoid/carbono" target="_blank" rel="noopener">github/appvoid/carbono</a></div>
+        </div>
+      </section>
     </div>
   </div>
   <script>
+/* --------- Fit-to-viewport scaling (no scroll) --------- */
+(function(){
+  const baseW = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--base-w'),10);
+  const baseH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--base-h'),10);
+  const fitEl = document.getElementById('fit');
+  function fit(){ const s = Math.min(window.innerWidth/baseW, window.innerHeight/baseH); fitEl.style.transform = `scale(${s})`; }
+  window.addEventListener('resize', fit, {passive:true}); fit();
+})();
+/* ---------------- Carbono micro-lib (unchanged API; minor fixes) ---------------- */
+class carbono {
+  constructor(debug = true) { this.layers=[]; this.weights=[]; this.biases=[]; this.activations=[]; this.details={}; this.debug=debug; }
+  layer(inputSize, outputSize, activation='tanh'){
+    this.layers.push({inputSize,outputSize,activation});
+    if(this.weights.length>0){
+      const lastOut = this.layers[this.layers.length-2].outputSize;
+      if(inputSize!==lastOut) throw new Error('Input size must match previous layer output size.');
+    }
+    const W=[]; 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))); } W.push(row); }
+    this.weights.push(W); this.biases.push(Array(outputSize).fill(0.01)); this.activations.push(activation);
   }
+  activationFunction(x,a){ switch(a){case 'tanh':return Math.tanh(x);case 'sigmoid':return 1/(1+Math.exp(-x));case 'relu':return Math.max(0,x);case 'selu':{const alpha=1.67326,scale=1.0507;return x>0?scale*x:scale*alpha*(Math.exp(x)-1);}default:throw new Error('Unknown activation');} }
+  activationDerivative(x,a){ switch(a){case 'tanh':return 1-Math.pow(Math.tanh(x),2);case 'sigmoid':{const s=1/(1+Math.exp(-x));return s*(1-s);}case 'relu':return x>0?1:0;case 'selu':{const alpha=1.67326,scale=1.0507;return x>0?scale:scale*alpha*Math.exp(x);}default:throw new Error('Unknown derivative');} }
+  positionalEncoding(input,maxLen){ const pe=new Array(maxLen).fill(0).map((_,pos)=>new Array(input[0].length).fill(0).map((_,i)=>{const ang=pos/Math.pow(10000,2*i/input[0].length);return pos%2===0?Math.sin(ang):Math.cos(ang);})); return input.map((seq,idx)=>seq.map((v,i)=>v+pe[idx][i])); }
+  multiHeadSelfAttention(input,numHeads=2){
+    const headSize=input[0].length/numHeads; const heads=[...Array(numHeads)].map(()=>[...Array(input.length)].map(()=>[...Array(headSize)].fill(0)));
+    for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<headSize;j++) heads[h][i][j]=input[i][h*headSize+j];
+    const scores=[...Array(numHeads)].map(()=>[...Array(input.length)].map(()=>[...Array(input.length)].fill(0)));
+    for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<input.length;j++){ let s=0; for(let k=0;k<headSize;k++) s+=heads[h][i][k]*heads[h][j][k]; scores[h][i][j]=s; }
+    const weights=scores.map(head=>head.map(row=>{const ex=row.map(v=>Math.exp(v)); const sum=ex.reduce((a,b)=>a+b,0); return ex.map(v=>v/sum)}));
+    const out=[...Array(input.length)].map(()=>[...Array(input[0].length)].fill(0));
+    for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<headSize;j++) for(let k=0;k<input.length;k++) out[i][h*headSize+j]+=weights[h][i][k]*heads[h][k][j];
+    return out;
   }
+  layerNormalization(arr){ const m=arr.reduce((s,v)=>s+v,0)/arr.length; const v=arr.reduce((s,x)=>s+Math.pow(x-m,2),0)/arr.length; return arr.map(x=>(x-m)/Math.sqrt(v+1e-5)); }
+  async train(trainSet,options={}){
+    const {epochs=200,learningRate=0.212,batchSize=16,printEveryEpochs=100,earlyStopThreshold=1e-6,testSet=null,callback=null}=options;
+    const start=Date.now(); const batch=Math.max(1,batchSize);
+    if(this.layers.length===0){ const n=trainSet[0].input.length; this.layer(n,n,'tanh'); this.layer(n,1,'tanh'); }
+    let lastTrainLoss=0,lastTestLoss=null;
+    for(let epoch=0;epoch<epochs;epoch++){
+      let trainError=0;
+      for(let b=0;b<trainSet.length;b+=batch){
+        const batchItems=trainSet.slice(b,b+batch); let batchError=0;
+        for(const data of batchItems){
+          const L=[data.input];
+          for(let i=0;i<this.weights.length;i++){
+            const inputs=L[i], W=this.weights[i], B=this.biases[i], act=this.activations[i]; const out=[];
+            for(let j=0;j<W.length;j++){ const w=W[j]; let sum=B[j]; for(let k=0;k<inputs.length;k++) sum+=inputs[k]*w[k]; out.push(this.activationFunction(sum,act)); }
+            L.push(out);
           }
+          const outIn=L[L.length-1]; const outErr=[]; for(let i=0;i<outIn.length;i++) outErr.push((data.output[i]??0)-outIn[i]);
+          let layerErrors=[outErr];
+          for(let i=this.weights.length-2;i>=0;i--){
+            const Wnext=this.weights[i+1], nextErr=layerErrors[0], curIn=L[i+1], act=this.activations[i]; const errs=[];
+            for(let j=0;j<this.layers[i].outputSize;j++){ let e=0; for(let k=0;k<this.layers[i+1].outputSize;k++) e+=nextErr[k]*Wnext[k][j]; errs.push(e*this.activationDerivative(curIn[j],act)); }
+            layerErrors.unshift(errs);
           }
+          for(let i=0;i<this.weights.length;i++){
+            const inputs=L[i], errs=layerErrors[i], W=this.weights[i], B=this.biases[i];
+            for(let j=0;j<W.length;j++){ const w=W[j]; for(let k=0;k<inputs.length;k++) w[k]+=learningRate*errs[j]*inputs[k]; B[j]+=learningRate*errs[j]; }
           }
+          batchError+=Math.abs(outErr[0]??0);
         }
+        trainError+=batchError;
       }
+      lastTrainLoss=trainError/trainSet.length;
+      if(testSet){ let te=0; for(const d of testSet){ const p=this.predict(d.input); te+=Math.abs((d.output[0]??0)-(p[0]??0)); } lastTestLoss=te/testSet.length; }
+      if((epoch+1)%printEveryEpochs===0 && this.debug) console.log(`Epoch ${epoch+1} | Train ${lastTrainLoss.toFixed(6)}${testSet?` | Val ${lastTestLoss.toFixed(6)}`:''}`);
+      if(callback) await callback(epoch+1,lastTrainLoss,lastTestLoss);
+      await new Promise(r=>setTimeout(r,0));
+      if(lastTrainLoss<earlyStopThreshold) { if(this.debug) console.log(`Early stop @${epoch+1}`); break; }
+    }
+    const end=Date.now(); let params=0; for(let i=0;i<this.weights.length;i++){ params+=this.weights[i].flat().length+this.biases[i].length; }
+    const summary={trainLoss:lastTrainLoss,testLoss:lastTestLoss,parameters:params,training:{time:end-start,epochs,learningRate,batchSize:batch},layers:this.layers.map(l=>({inputSize:l.inputSize,outputSize:l.outputSize,activation:l.activation}))};
+    this.details=summary; return summary;
   }
+  predict(input){
+    let x=input; const acts=[input], raw=[];
+    for(let i=0;i<this.weights.length;i++){ const W=this.weights[i], B=this.biases[i], a=this.activations[i]; const y=[], r=[];
+      for(let j=0;j<W.length;j++){ const w=W[j]; let s=B[j]; for(let k=0;k<x.length;k++) s+=x[k]*w[k]; r.push(s); y.push(this.activationFunction(s,a)); }
+      raw.push(r); acts.push(y); x=y;
     }
+    this.lastActivations=acts; this.lastRawValues=raw; return x;
   }
+  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(callback){
+    const onChange=(e)=>{ const f=e.target.files[0]; if(!f) return; const r=new FileReader();
+      r.onload=(ev)=>{ try{ const data=JSON.parse(ev.target.result); this.weights=data.weights; this.biases=data.biases; this.activations=data.activations; this.layers=data.layers; this.details=data.details; callback&&callback(); if(this.debug) console.log('Loaded'); }catch(err){ if(this.debug) console.error('Load failed',err); } finally{ input.removeEventListener('change',onChange); input.remove(); } };
+      r.readAsText(f);
     };
+    const input=document.createElement('input'); input.type='file'; input.accept='.json'; input.style.position='fixed'; input.style.opacity='0'; document.body.append(input); input.addEventListener('change',onChange); input.click();
   }
 }
+/* ---------------- App ---------------- */
+document.addEventListener('DOMContentLoaded',()=>{
+  const nn=new carbono();
+  let lossHistory=[];
+  const lossCanvas=document.getElementById('lossGraph');
+  const networkCanvas=document.getElementById('networkGraph');
+  const lossCtx=lossCanvas.getContext('2d');
+  const el={
+    loadDataBtn:document.getElementById('loadDataBtn'),
+    trainingData:document.getElementById('trainingData'),
+    testData:document.getElementById('testData'),
+    numHiddenLayers:document.getElementById('numHiddenLayers'),
+    hiddenLayersConfig:document.getElementById('hiddenLayersConfig'),
+    trainButton:document.getElementById('trainButton'),
+    stats:document.getElementById('stats'),
+    epochBar:document.getElementById('epochBar'),
+    epochs:document.getElementById('epochs'),
+    learningRate:document.getElementById('learningRate'),
+    batchSize:document.getElementById('batchSize'),
+    predictButton:document.getElementById('predictButton'),
+    predictionInput:document.getElementById('predictionInput'),
+    predictionResult:document.getElementById('predictionResult'),
+    saveButton:document.getElementById('saveButton'),
+    loadButton:document.getElementById('loadButton')
+  };
+  const parseCSV=(csv)=> csv.trim().split('\n').filter(Boolean).map(row=>{
+    const values=row.split(',').map(s=>Number(s.trim()));
+    return {input:values.slice(0,-1),output:[values[values.length-1]]};
+  });
+  function drawLossGraph(){
+    const {width,height}=lossCanvas;
+    lossCtx.clearRect(0,0,width,height);
+    if(lossHistory.length===0) return;
+    const maxLoss=Math.max(1e-9,...lossHistory.map(l=>Math.max(l.train, l.test??0)));
+    function line(data, color){
+      lossCtx.strokeStyle=color; lossCtx.beginPath();
+      data.forEach((v,i)=>{ const x=(i/(data.length-1))*width; const y=height-(v/maxLoss)*height; if(i===0) lossCtx.moveTo(x,y); else lossCtx.lineTo(x,y); });
+      lossCtx.stroke();
+    }
+    line(lossHistory.map(l=>l.train),'#ffffff');
+    if(lossHistory.some(l=>l.test!==undefined)) line(lossHistory.map(l=>l.test ?? 0),'#777777');
+  }
+  function createLayerConfigUI(n){
+    el.hiddenLayersConfig.innerHTML='';
+    for(let i=0;i<n;i++){
+      const block=document.createElement('div');
+      block.className='row';
+      block.style.marginTop='0';
+      block.innerHTML=`
+        <div style="grid-column: span 2;" class="block">
+          <label>Layer ${i+1} Nodes</label>
+          <input class="input" type="number" value="5" data-layer-index="${i}">
+        </div>
+        <div style="grid-column: span 2;" class="block">
+          <label>Activation</label>
+          <select class="input" data-layer-index="${i}">
+            <option>tanh</option>
+            <option>sigmoid</option>
+            <option>relu</option>
+            <option>selu</option>
+          </select>
+        </div>`;
+      el.hiddenLayersConfig.appendChild(block);
+    }
+  }
+  async function trainModel(){
+    lossHistory=[];
+    const trainingData=parseCSV(el.trainingData.value);
+    const testData=parseCSV(el.testData.value||'');
+    el.stats.innerHTML='';
+    const nHidden=parseInt(el.numHiddenLayers.value,10);
+    const layerCfg=[];
+    for(let i=0;i<nHidden;i++){
+      const size=parseInt(document.querySelector(`input[data-layer-index="${i}"]`).value,10);
+      const act=document.querySelector(`select[data-layer-index="${i}"]`).value;
+      layerCfg.push({size,activation:act});
+    }
+    nn.layers=[]; nn.weights=[]; nn.biases=[]; nn.activations=[];
+    const numInputs=trainingData[0].input.length;
+    nn.layer(numInputs, layerCfg[0].size, layerCfg[0].activation);
+    for(let i=1;i<layerCfg.length;i++) nn.layer(layerCfg[i-1].size, layerCfg[i].size, layerCfg[i].activation);
+    nn.layer(layerCfg[layerCfg.length-1].size, 1, 'tanh');
+    const opts={
+      epochs:parseInt(el.epochs.value,10),
+      learningRate:parseFloat(el.learningRate.value),
+      batchSize:parseInt(el.batchSize.value,10),
+      printEveryEpochs:1,
+      testSet:testData.length?testData:null,
+      callback:async (epoch,trainLoss,testLoss)=>{
+        lossHistory.push({train:trainLoss,test:testLoss});
+        drawLossGraph();
+        el.epochBar.style.width=`${(epoch/opts.epochs)*100}%`;
+        el.stats.innerHTML=`
+          <div><b>Epoch</b></div><div>${epoch}/${opts.epochs}</div>
+          <div><b>Train</b></div><div>${trainLoss.toFixed(6)}</div>
+          ${testLoss!==null?`<div><b>Val</b></div><div>${testLoss.toFixed(6)}</div>`:''}
+        `;
       }
+    };
+    try{ el.trainButton.disabled=true; el.trainButton.textContent='Training…'; await nn.train(trainingData,opts);
+      el.stats.innerHTML+=`<div><b>Status</b></div><div>Model trained</div>`;
+    }catch(e){ console.error('Training error:',e);
+      el.stats.innerHTML+=`<div><b>Error</b></div><div>${e.message}</div>`;
+    }finally{ el.trainButton.disabled=false; el.trainButton.textContent='Train'; }
+  }
+  function drawNetwork(){
+    const ctx=networkCanvas.getContext('2d');
+    ctx.clearRect(0,0,networkCanvas.width,networkCanvas.height);
+    if(!nn.lastActivations) return;
+    const pad=34; const W=networkCanvas.width-pad*2; const H=networkCanvas.height-pad*2;
+    const layers=[];
+    // inputs
+    const inSize=nn.layers[0].inputSize; const inX=pad; const inNodes=[];
+    for(let i=0;i<inSize;i++){ const y=pad+(inSize>1?(H*i)/(inSize-1):H/2); inNodes.push({x:inX,y,val:nn.lastActivations[0][i]||0}); }
+    layers.push(inNodes);
+    // hidden(s)
+    for(let i=1;i<nn.lastActivations.length-1;i++){
+      const L=nn.lastActivations[i]; const nodes=[]; const x=pad+(W*i)/(nn.lastActivations.length-1);
+      for(let j=0;j<L.length;j++){ const y=pad+(L.length>1?(H*j)/(L.length-1):H/2); nodes.push({x,y,val:L[j]}); }
+      layers.push(nodes);
+    }
+    // output
+    const outX=networkCanvas.width-pad; const outY=pad+H/2; layers.push([{x:outX,y:outY,val:nn.lastActivations.at(-1)[0]||0}]);
+    // connections
+    ctx.lineWidth=1;
+    for(let i=0;i<layers.length-1;i++){
+      const A=layers[i], B=layers[i+1], Wmat=nn.weights[i];
+      for(let j=0;j<A.length;j++) for(let k=0;k<B.length;k++){
+        const w=Wmat[k][j]; const sig=Math.abs((A[j].val||0)*w); const op=Math.min(Math.max(sig,0.06),1);
+        ctx.strokeStyle=`rgba(255,255,255,${op})`; ctx.beginPath(); ctx.moveTo(A[j].x,A[j].y); ctx.lineTo(B[k].x,B[k].y); ctx.stroke();
       }
+    }
+    // nodes
+    for(const L of layers){ for(const n of L){ const r=3.5, op=Math.min(Math.max(Math.abs(n.val),0.3),1);
+      ctx.fillStyle=`rgba(255,255,255,${op})`; ctx.beginPath(); ctx.arc(n.x,n.y,r,0,Math.PI*2); ctx.fill();
+      ctx.strokeStyle='rgba(255,255,255,1)'; ctx.lineWidth=.8; ctx.stroke();
+    }}
+  }
+  function sizeCanvases(){
+    [lossCanvas,networkCanvas].forEach(cv=>{ cv.width=cv.parentElement.clientWidth; cv.height=cv.parentElement.clientHeight; });
+    drawNetwork();
+  }
+  el.loadDataBtn.onclick=()=>{ el.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`; el.testData.value=`0.4, 0.2, 0.6, 1.0
+0.2, 0.82, 0.83, 1.0`; };
+  el.numHiddenLayers.addEventListener('change',(e)=>createLayerConfigUI(parseInt(e.target.value,10)));
+  el.trainButton.addEventListener('click',trainModel);
+  el.predictButton.addEventListener('click',()=>{
+    const input=el.predictionInput.value.split(',').map(s=>Number(s.trim())).filter(n=>!Number.isNaN(n));
+    const p=nn.predict(input);
+    el.predictionResult.textContent=`Prediction: ${Number.isFinite(p[0])?p[0].toFixed(6):'NaN'}`;
+    drawNetwork();
+  });
+  el.saveButton.addEventListener('click',()=>nn.save('model'));
+  el.loadButton.addEventListener('click',()=>nn.load(()=>{ el.stats.innerHTML+=`<div><b>Status</b></div><div>Model loaded</div>`; }));
+  window.addEventListener('resize', sizeCanvases, {passive:true});
+  createLayerConfigUI(parseInt(el.numHiddenLayers.value,10));
+  sizeCanvases();
+});
   </script>
 </body>
 </html>