<!DOCTYPE html>
<html>
  <head>
    <style>
      .image-slot {
        width: 33.33%;
        height: 300px;
        float: left;
        text-align: center;
        position: relative;
        border: 1px solid black;
      }
      .image-slot input[type="file"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
      }
      .image-slot img {
        max-width: 100%;
        max-height: 100%;
      }
      .slider {
        clear: both;
        width: 100%;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="image-slot">
      <input type="file" id="left-image" onchange="uploadImage(this)">
      <label for="left-image">
        <img id="left-image-preview" src="">
      </label>
    </div>
    <div class="image-slot" id="middle-image-slot">
      <img id="middle-image" src="">
    </div>
    <div class="image-slot">
      <input type="file" id="right-image" onchange="uploadImage(this)">
      <label for="right-image">
        <img id="right-image-preview" src="">
      </label>
    </div>
    <div class="slider">
      <input type="range" id="slider" min="0" max="1" step="0.01" value="0.5" onchange="updateMiddleImage()">
    </div>

    <script>
      const leftImage = document.getElementById("left-image-preview");
      const rightImage = document.getElementById("right-image-preview");
      const middleImage = document.getElementById("middle-image");
      const slider = document.getElementById("slider");
      let leftImageData;
      let rightImageData;

      function uploadImage(input) {
        const reader = new FileReader();
        reader.onload = function() {
          const image = new Image();
          image.src = reader.result;
          image.onload = function() {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext("2d");
            context.drawImage(image, 0, 0);
            if (input.id === "left-image") {
              leftImage.src = reader.result;
              leftImageData = context.getImageData(0, 0, image.width, image.height);
            } else if (input.id === "right-image") {
              rightImage.src = reader.result;
              rightImageData = context.getImageData(0, 0, image.width, image.height);
            }
            updateMiddleImage();
          };
        };
        reader.readAsDataURL(input.files[0]);
      }

      function updateMiddleImage() {
        if (!leftImageData || !rightImageData) return;

        const weight = slider.value;
        const canvas = document.createElement("canvas");
        canvas.width = leftImageData.width;
        canvas.height = leftImageData.height;
        const context = canvas.getContext("2d");
        const middleImageData = context.createImageData(leftImageData.width, leftImageData.height);

        for (let i = 0; i < middleImageData.data.length; i += 4) {
          middleImageData.data[i] =
            weight * leftImageData.data[i] + (1 - weight) * rightImageData.data[i];
          middleImageData.data[i + 1] =
            weight * leftImageData.data[i + 1] + (1 - weight) * rightImageData.data[i + 1];
          middleImageData.data[i + 2] =
            weight * leftImageData.data[i + 2] + (1 - weight) * rightImageData.data[i + 2];
          middleImageData.data[i + 3] =
            weight * leftImageData.data[i + 3] + (1 - weight) * rightImageData.data[i + 3];
        }

        context.putImageData(middleImageData, 0, 0);
        middleImage.src = canvas.toDataURL();
      }
    </script>
  </body>
</html>
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence