plz fix the slider here it should show the priginal and inpainted image when toggled on
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Inpaint View</title>
   <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #f4f4f4;
            overflow-x: hidden;
            overflow-y: auto;
            text-align: justify;
        }

        header#app-bar {
            background-color: #f4f4f4;
            color: white;
            padding: 30px;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: left;
        }

        header#app-bar form {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
        }

        header#app-bar #logo {
            height: 40px;
            margin-right: 10px;
        }

        header#app-bar h1 {
            margin: 0;
            font-size: 24px;
            color: black;
        }

        header#app-bar a {
            text-decoration: none; /* Remove underline from all links */
            color: inherit; /* Inherit color from parent element */
        }

        #image-container {
            position: relative;
            max-width: 80vw;
            max-height: 80vh;
            min-height:300px;
            margin: auto;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
        }

        #uploaded-image {
            position: relative;
            max-width: none;
            max-height: none;
            top: 0;
            left: 0;
        }

        #canvas-mask {
            position: absolute;
            top: 0;
            left: 0;
        }

        .controls {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            margin-top:40px;
        }

        .controls div {
            margin: 0 10px;
        }

        .controls button {
            padding: 8px 12px;
            border: none;
            background-color: #3498db;
            color: white;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .controls button:hover {
            background-color: #2980b9;
        }

        #zoom-slider, #brush-size {
            width: 150px;
        }

        #save-modal {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        #save-modal input {
            margin: 10px 0;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            border-radius: 50%;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }


       #resizer {
          position:absolute;
          display:flex;
          align-items:center;
          z-index:5;
          top:0;
          left:50%;
          height:100%;
          width:4px;
          background:white;
          /*Stop vertical scrolling on touch*/
          -ms-touch-action: pan-y;
            touch-action: pan-y;
        }

        #resizer:after {
          background:linear-gradient;
          font-family: "Font Awesome 5 Free";
          content:'\f337';
          font-weight:900;
          display:flex;
          justify-content:center;
          align-items:center;
          color:white;
          position:absolute;
          margin: 0 0 0 -22px;
          width:40px;
          height:40px;
          border-radius:50%;
          border:3px solid white;
        }
    </style>
</head>
<body>
<!-- App Bar -->
<header id="app-bar">
    <form id="home-form" method="post">
        {% csrf_token %}
        <button type="submit" id="logo-button" style="background: none; border: none; cursor: pointer;">
            <img src="{% static 'images/logo.png' %}" alt="Logo" id="logo">
        </button>
        <button type="submit" id="title-button" style="background: none; border: none; cursor: pointer;">
            <h1>Magic Brush idk ¯\_(ツ)_/¯</h1>
        </button>
    </form>
</header>

<div id="image-container">
    <img id="uploaded-image" src="{{ image_url }}" alt="Uploaded Image">
    <img id="original-image" src="{{ original_url }}" alt="Original Image" style="display: none;">
    <canvas id="canvas-mask"></canvas>
    <div id="resizer"></div>
</div>

<div class="controls">
    <div>
        <label for="zoom-slider">Zoom:</label>
        <input type="range" id="zoom-slider" min="1" max="5" step="0.1" value="1">
    </div>
    <div>
        <label for="brush-size">Brush Size:</label>
        <input type="range" id="brush-size" min="1" max="50" value="10">
    </div>
    <div>
        <label>Show original:</label>
        <label class="toggle-switch">
            <input type="checkbox" id="toggle-image">
            <span class="slider"></span>
        </label>
    </div>
    <form id="image-form" method="post">
        {% csrf_token %}
        <button type="button" id="inpaint-button" disabled>Inpaint</button>
        <button type="submit" name="cancel">Cancel</button>
        <button type="button" id="save-button">Share</button>
        <button type="submit" name="download" id="download-button">Download</button>
    </form>
</div>

<!-- Modal for entering creator name -->
<div id="save-modal">
    <h3>Enter your name</h3>
    <form method="post" id="save-form">
        {% csrf_token %}
        <input type="text" name="creator_name" placeholder="Your Name" required>
        <input type="text" name="creator_comment" placeholder="comment" required>
        <input type="hidden" name="result_image_path" value="{{ image_url }}">
        <button type="submit" name="save">Share</button>
        <button type="button" id="cancel-save">Cancel</button>
    </form>
</div>

<!-- Overlay and spinner for processing indication -->
<div class="overlay" id="overlay">
    <div class="spinner"></div>
</div>

<script>
    const canvas = document.getElementById('canvas-mask');
    const ctx = canvas.getContext('2d');
    const uploadedImage = document.getElementById('uploaded-image');
    const originalImage = document.getElementById('original-image');
    const zoomSlider = document.getElementById('zoom-slider');
    const imageContainer = document.getElementById('image-container');
    const inpaintButton = document.getElementById('inpaint-button');
    const saveButton = document.getElementById('save-button');
    const toggleImage = document.getElementById('toggle-image');
    const resizer = document.getElementById('resizer')
    const slider = document.getElementById('image-container');
    let drawingMade = false;
    let zoomLevel = parseFloat(zoomSlider.value);


    // Set up the canvas size to match the image size
    window.onload = function() {
        canvas.width = uploadedImage.width;
        canvas.height = uploadedImage.height;
        updateCursor();
        updateZoom(zoomLevel);
    };

    // Brush size interaction
    let brushSize = 10;
    document.getElementById('brush-size').addEventListener('input', function(event) {
        brushSize = event.target.value;
        updateCursor();
    });

    function updateCursor() {
        const cursorCanvas = document.createElement('canvas');
        cursorCanvas.width = cursorCanvas.height = brushSize * 2;
        const cursorCtx = cursorCanvas.getContext('2d');

        cursorCtx.beginPath();
        cursorCtx.arc(brushSize, brushSize, brushSize, 0, 2 * Math.PI);
        cursorCtx.fillStyle = 'white';
        cursorCtx.fill();
        cursorCtx.strokeStyle = 'black';
        cursorCtx.lineWidth = 2;
        cursorCtx.stroke();

        const cursorDataUrl = cursorCanvas.toDataURL('image/png');
        uploadedImage.style.cursor = `url('${cursorDataUrl}'), auto`;
    }

    // Drawing on canvas
    let drawing = false;
    canvas.addEventListener('mousedown', function() {
        drawing = true;
        drawingMade = true;
        updateInpaintButton();
    });

    canvas.addEventListener('mouseup', function() {
        drawing = false;
        ctx.beginPath();
    });

    canvas.addEventListener('mousemove', function(e) {
        if (drawing) {
            ctx.lineWidth = brushSize;
            ctx.lineCap = 'round';
            ctx.strokeStyle = 'white';

            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(e.offsetX, e.offsetY);
        }
    });

    function updateInpaintButton() {
        inpaintButton.disabled = !drawingMade;
    }

    // Zoom functionality with slider
    zoomSlider.addEventListener('input', function() {
        zoomLevel = parseFloat(zoomSlider.value);
        updateZoom(zoomLevel);
    });

    function updateZoom(level) {
        //uploadedImage.style.transform = `scale(${level})`;
        //canvas.style.transform = `scale(${level})`;
        //originalImage.style.transform = `scale(${level})`;
        imageContainer.style.transform = `scale(${level})`;

    }

    // Zoom functionality with mouse scroll
    imageContainer.addEventListener('wheel', function(event) {
        event.preventDefault();
        const delta = Math.sign(event.deltaY);
        const rect = imageContainer.getBoundingClientRect();
        const mouseX = event.clientX - rect.left;
        const mouseY = event.clientY - rect.top;

        const oldZoomLevel = zoomLevel;
        zoomLevel = Math.min(Math.max(0.1, zoomLevel - delta * 0.1), 5); // Adjust zoom limits as needed
        zoomSlider.value = zoomLevel;
        updateZoom(zoomLevel);

        const scaleRatio = zoomLevel / oldZoomLevel;

        const offsetX = mouseX * scaleRatio - mouseX;
        const offsetY = mouseY * scaleRatio - mouseY;

        //originalImage.style.transformOrigin = `${mouseX}px ${mouseY}px`;
        //uploadedImage.style.transformOrigin = `${mouseX}px ${mouseY}px`;
        //canvas.style.transformOrigin = `${mouseX}px ${mouseY}px`;
        imageContainer.style.transformOrigin = `${mouseX}px ${mouseY}px`;
    });

    // Toggle image display
    toggleImage.addEventListener('change', function() {
        if (this.checked) {
            uploadedImage.style.display = 'none';
            canvas.style.display = 'none';
            originalImage.style.display = 'block';
            resizer.style.display='';


        } else {
            uploadedImage.style.display = 'block';
            canvas.style.display = 'block';
            originalImage.style.display = 'none';
            resizer.style.display='none';

        }
    });

    // Inpaint button interaction - send mask to server
    inpaintButton.addEventListener('click', function() {
        if (!drawingMade) return;

        const maskData = canvas.toDataURL(); // Capture the mask as base64
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{% url "inpaint_view" %}';

        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = 'csrfmiddlewaretoken';
        csrfInput.value = '{{ csrf_token }}';

        const maskInput = document.createElement('input');
        maskInput.type = 'hidden';
        maskInput.name = 'mask';
        maskInput.value = maskData;

        form.appendChild(csrfInput);
        form.appendChild(maskInput);

        // Show overlay while processing
        document.getElementById('overlay').style.display = 'flex';

        // Submit the form
        document.body.appendChild(form);
        form.submit();
    });

    // Save button functionality
    saveButton.addEventListener('click', function() {
        document.getElementById('save-modal').style.display = 'block';
        document.getElementById('overlay').style.display = 'none';
    });

    // Cancel save button functionality
    document.getElementById('cancel-save').addEventListener('click', function() {
        document.getElementById('save-modal').style.display = 'none';
    });
</script>

</body>
</html>