index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dimerization Network as Chemical Classifier</title>
  <style>
    body {
      margin: 0;
      font-weight: bold;
      font-family: Arial, sans-serif;
      background-color: rgb(173, 173, 173);
    }
    .container {
      width: 1000px;       /* Fixed overall width */
      margin: 20px auto;   /* Centers the container with some vertical spacing */
      padding: 20px;       /* Internal padding */
      box-sizing: border-box;
      background-color: rgb(241, 241, 241); /* Light grey background for the face of the page */
    }
    h1 {
      text-align: center; /* Center the main page title */
    }
    .main-section {
      display: flex;
    }
    .left-col {
      width: 60%;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .right-col {
      width: 40%;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .controls {
      text-align: left;
      margin-left: 20%;
      margin-bottom: 20px;
    }
    .controls label {
      display: block;
      margin-top: 10px;
    }
    .controls input[type="range"] {
      width: 70%;
    }
    /* Container for side-by-side drift and loss controls */
    .side-by-side {
      display: flex;
      justify-content: space-between;
    }
    .side-by-side > div {
      flex: 1;
    }
    figure {
      margin: 10px 0;
      text-align: center;
    }
    figure img {
      max-width: 100%;
      height: auto;
    }
    figcaption {
      text-align: center;
      font-size: 20px; /* Larger font for titles */
      margin-top: 10px;
      margin-bottom: 1px;
      font-weight: bold;
    }
    figcaption small {
      display: block;
      font-size: 16px; /* Larger font for subtitles */
      color: #666;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Dimerization Network as Chemical Classifier</h1>
    <div class="main-section">
      <!-- Left Column: Controls, Output fugacities and Evolved network -->
      <div class="left-col">
        <div class="controls">
          <div class="side-by-side">
            <div class="drift-control">
              <label for="drift">Drift</label>
              <input type="range" id="drift" name="drift" min="0" max="3" step="1" value="0">
              <span id="driftValue">0</span>%
            </div>
            <div class="loss-control">
              <label for="loss">Loss Function</label>
              <input type="range" style="width: 30%"" id="loss" name="loss" min="0" max="1" step="1" value="0">
              <span id="lossValue">Contrast</span>
            </div>
          </div>
          <label for="cocktailSet">Cocktail Set</label>
          <input type="range" id="cocktailSet" name="cocktailSet" min="1" max="48" step="1" value="1">
          <span id="cocktailSetValue">1</span>
          
          <!-- Drift and Loss sliders side-by-side -->

          
          <label for="noise">Noise/Signal</label>
          <input type="range" id="noise" name="noise" min="10" max="120" step="5" value="10">
          <span id="noiseValue">10</span>%
        </div>
        <figure style="width: 80%; margin: 0 auto">
          <figcaption>Input Cocktails</figcaption>
          <img id="patternsImg" src="images/patterns1.svg" alt="Input Cocktails">
        </figure>
        <figure style="width: 100%">
          <figcaption>Output fugacities<br><small>(free concentrations)</small></figcaption>
          <img id="scatterImg" src="images/scatter_1_0_10.png" alt="Output fugacities">
        </figure>
      </div>
      <!-- Right Column: Input Cocktails and Output distributions -->
      <div class="right-col">
        <figure style="width: 100%; margin: 0 auto">
          <figcaption>Evolved network</figcaption>
          <img id="cdnImg" src="images/CDN_1_0_10.svg" alt="Evolved network">
        </figure>
        <figure>
          <figcaption>Output distributions<br><small>(I is Mutual Information)</small></figcaption>
          <img id="histogramImg" src="images/histograms_1_0_10.png" alt="Output distributions">
        </figure>
      </div>
    </div>
  </div>
  <script>
    // Allowed drift values corresponding to slider positions 0, 1, 2, 3
    const allowedDrift = [0, 4, 8, 16];
    const lossOptions = ['Contrast', 'MSE'];
    const lossIDs = ['_', '_2_F'];

    function updateImages() {
      // Get the current values from the controls
      const cocktailSet = document.getElementById('cocktailSet').value;
      const lossIndex = parseInt(document.getElementById('loss').value);
      const loss = lossOptions[lossIndex];
      const ID = lossIDs[lossIndex];
      const driftIndex = parseInt(document.getElementById('drift').value);
      const drift = allowedDrift[driftIndex];
      const noise = document.getElementById('noise').value;
      
      // Update the displayed values for cocktail set, drift, loss, and noise
      document.getElementById('cocktailSetValue').innerText = cocktailSet;
      document.getElementById('lossValue').innerText = loss;
      document.getElementById('driftValue').innerText = drift;
      document.getElementById('noiseValue').innerText = noise;
      
      // Update image source filenames based on current controls
      document.getElementById('patternsImg').src = 'images/patterns' + cocktailSet + '.svg';
      document.getElementById('scatterImg').src = 'images/scatter' + ID + cocktailSet + '_' + drift/2 + '_' + noise + '.png';
      document.getElementById('histogramImg').src = 'images/histograms' + ID + cocktailSet + '_' + drift/2 + '_' + noise + '.png';
      document.getElementById('cdnImg').src = 'images/CDN' + ID + cocktailSet + '_' + drift/2 + '_' + noise + '.svg';
    }
    
    // Add event listeners to update images when controls change
    document.getElementById('cocktailSet').addEventListener('input', updateImages);
    document.getElementById('loss').addEventListener('input', updateImages);
    document.getElementById('drift').addEventListener('input', updateImages);
    document.getElementById('noise').addEventListener('input', updateImages);
  </script>
</body>
</html>