assets/metrics-visual.html

<div align="center">
  <table style="border-collapse: separate; border-spacing: 20px; background: none;">
    <tr>
      <td align="center" style="background: #f0f0f0; padding: 15px; border-radius: 8px;"><div align="center">
  <table style="border-collapse: separate; border-spacing: 20px; background: none;">
    <tr>
      <td align="center" style="background: #f0f0f0; padding: 15px; border-radius: 8px;">
        <h3>Performance Metrics</h3>
        <ul style="list-style: none; padding: 0;">
          <li>Cross-Entropy Loss: 7.11</li>
          <li>Perplexity: 1223.8</li>
          <li>Token Accuracy: 78.5%</li>
        </ul>
      </td>
      <td align="center" style="background: #f0f0f0; padding: 15px; border-radius: 8px;">
        <h3>Resource Usage</h3>
        <ul style="list-style: none; padding: 0;">
          <li>Model Size: 1.82 GB</li>
          <li>Training Time: 2.5 min</li>
          <li>Parameters: ~7.1M</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td align="center" style="background: #f0f0f0; padding: 15px; border-radius: 8px;">
        <h3>Training Stats</h3>
        <ul style="list-style: none; padding: 0;">
          <li>Total Steps: 20,000</li>
          <li>Batch Size: 8</li>
          <li>Epochs: 2</li>
        </ul>
      </td>
      <td align="center" style="background: #f0f0f0; padding: 15px; border-radius: 8px;">
        <h3>Network Performance</h3>
        <ul style="list-style: none; padding: 0;">
          <li>Efficiency: 91.2%</li>
          <li>Coherence: 82.1%</li>
          <li>Node Success Rate: 94.5%</li>
        </ul>
      </td>
    </tr>
  </table>
</div>