Spaces:

appvoid
/

carbono

Running

App Files Files Community

appvoid commited on Oct 23, 2025

Commit

d5a9bbf

verified ·

1 Parent(s): 667ba68

Update index.html

Browse files

Files changed (1) hide show

index.html +345 -446

index.html CHANGED Viewed

@@ -2,85 +2,81 @@
 <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"],
@@ -89,22 +85,22 @@
     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;
     }
@@ -113,87 +109,50 @@
     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 {
@@ -201,123 +160,93 @@
       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>
     class carbono {
   constructor(debug = true) {
     this.layers = [];
@@ -327,7 +256,6 @@
     this.details = {};
     this.debug = debug;
   }
   // Add a new layer to the neural network
   layer(inputSize, outputSize, activation = 'tanh') {
     this.layers.push({
@@ -354,7 +282,6 @@
     this.biases.push(biases);
     this.activations.push(activation);
   }
   // Apply the activation function
   activationFunction(x, activation) {
     switch (activation) {
@@ -372,7 +299,6 @@
         throw new Error('Whoops! We don\'t know that activation function.');
     }
   }
   // Calculate the derivative of the activation function
   activationDerivative(x, activation) {
     switch (activation) {
@@ -391,7 +317,6 @@
         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) => {
@@ -402,7 +327,6 @@
     });
     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;
@@ -439,14 +363,12 @@
     }
     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 {
@@ -467,7 +389,6 @@
     }
     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) {
@@ -540,7 +461,6 @@
         }
         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)}` : ''}`);
       }
@@ -579,7 +499,6 @@
     this.details = trainingSummary;
     return trainingSummary;
   }
   // Use the trained network to make predictions
   predict(input) {
     let layerInput = input;
@@ -608,7 +527,6 @@
     this.lastRawValues = allRawValues;
     return layerInput;
   }
   // Save the model to a file
   save(name = 'model') {
     const data = {
@@ -628,7 +546,6 @@
     a.click();
     URL.revokeObjectURL(url);
   }
   // Load a saved model from a file
   load(callback) {
     const handleListener = (event) => {
@@ -665,275 +582,257 @@
     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...';
-        // nn.play()
-        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>
 <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"],
     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="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 {
       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.details = {};
     this.debug = debug;
   }
   // Add a new layer to the neural network
   layer(inputSize, outputSize, activation = 'tanh') {
     this.layers.push({
     this.biases.push(biases);
     this.activations.push(activation);
   }
   // Apply the activation function
   activationFunction(x, activation) {
     switch (activation) {
         throw new Error('Whoops! We don\'t know that activation function.');
     }
   }
   // Calculate the derivative of the activation function
   activationDerivative(x, activation) {
     switch (activation) {
         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 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;
     }
     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 {
     }
     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) {
         }
         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)}` : ''}`);
       }
     this.details = trainingSummary;
     return trainingSummary;
   }
   // Use the trained network to make predictions
   predict(input) {
     let layerInput = input;
     this.lastRawValues = allRawValues;
     return layerInput;
   }
   // Save the model to a file
   save(name = 'model') {
     const data = {
     a.click();
     URL.revokeObjectURL(url);
   }
   // Load a saved model from a file
   load(callback) {
     const handleListener = (event) => {
     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>