static/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TheoremOne | LLM Benchmarking Metrics</title>
  <!-- Add Bootstrap CSS link -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!-- Add DataTables CSS link -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
  <!-- Custom CSS -->
  <style>
    /* Custom styles for header, navbar, and sidebar */
    #header {
      background-color: #007bff;
      color: #fff;
      padding: 10px;
      display: flex; /* Use Flexbox */
      align-items: center; /* Center the items vertically */
    }

    #theoremone-logo {
      width: 50px;
      height: 50px;
      margin-right: 10px; /* Add some space between the logo and the heading */
    }

    #header h1 {
      margin: 0; /* Remove the default margin on the heading */
    }

    #navbar {
      background-color: #f8f9fa;
      border-right: 1px solid #ccc;
      min-height: 100vh;
      padding: 20px;
    }

    #sidebar-logo {
      width: 50px;
      height: 50px;
      margin: 10px auto;
    }

    #main-content {
      padding: 20px;
    }

    /* Custom styles for footer */
    #footer {
      background-color: #f8f9fa;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- Header -->
  <div id="header">
    <!-- SVG Icon -->
    <div id="theoremone-logo">
      <svg id="icon" width="50" height="50" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <!-- Include the SVG code from your th1-icon-round.svg file here -->
        <use xlink:href="assets/th1-icon-round.svg#icon"></use>
      </svg>
    </div>

    <h1>TheoremOne</h1>
  </div>

  <!-- Navbar and Sidebar -->
  <div class="container-fluid">
    <div class="row">
      <!-- Navbar -->
      <div class="col-md-3" id="navbar">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="aboutus.html">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contactus.html">Contact</a>
          </li>
        </ul>
      </div>

      <!-- Main Content -->
      <div class="col-md-9" id="main-content">
        <h2>LLM Benchmarking Metrics</h2>
        <div id="table-container"></div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div id="footer">
    <p>&copy; 2023 TheoremOne. All rights reserved.</p>
  </div>

  <!-- Add Bootstrap and jQuery JS links -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <!-- Add DataTables JS link -->
  <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

  <script>
    const csvFilePath = 'sample1.csv'; // Replace with your CSV file path
    const refreshInterval = 5000; // Refresh interval in milliseconds (e.g., 5000 = 5 seconds)

    window.addEventListener('DOMContentLoaded', handleDOMContentLoaded);

    function handleDOMContentLoaded() {
      refreshTable();
      setInterval(refreshTable, refreshInterval);
    }

    function refreshTable() {
      fetchCSVFile(csvFilePath)
        .then(csvContent => {
          const table = createTableFromCSV(csvContent);
          const tableContainer = document.getElementById('table-container');
          tableContainer.innerHTML = '';
          tableContainer.appendChild(table);

          // Initialize DataTables on the created table
          $(table).DataTable({
            // You can add additional DataTables options here if needed
          });
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }

    function fetchCSVFile(filePath) {
      return fetch(filePath)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.text();
        });
    }

    function createTableFromCSV(csv) {
      const table = document.createElement('table');
      table.classList.add('table', 'table-bordered', 'table-striped');

      const lines = csv.split('\n');

      // Create table headers
      const headers = lines[0].split(',');
      const thead = document.createElement('thead');
      const headerRow = document.createElement('tr');
      for (let i = 0; i < headers.length; i++) {
        const th = document.createElement('th');
        th.textContent = headers[i];
        headerRow.appendChild(th);
      }
      thead.appendChild(headerRow);
      table.appendChild(thead);

      // Create table rows
      const tbody = document.createElement('tbody');
      for (let i = 1; i < lines.length; i++) {
        const rowData = lines[i].split(',');
        if (rowData.length === headers.length) {
          const row = document.createElement('tr');
          for (let j = 0; j < rowData.length; j++) {
            const cell = document.createElement('td');
            cell.textContent = rowData[j];
            row.appendChild(cell);
          }
          tbody.appendChild(row);
        }
      }
      table.appendChild(tbody);

      return table;
    }
  </script>
</body>

</html>