static/index.html

<div class="ai-tool-container">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
    <div class="container">
        <h3>Digitoon | Image to cartoon with digital painting </h3>
        <form id="remakeai-form">
            <div class="form-group">
                <label for="file" class="custom-file-upload">
                    <i class="fa fa-cloud-upload"></i> Upload Image
                </label>
                <input type="file" id="file" name="file" required>
                <span id="file-name"></span>
            </div>

            <div class="form-group">
                <select id="styleSelect"style="display: none;" required>
            <option value="AnimeGANv3_JP_face v1.0">Select Style</option>
          
        </select>
        <label for="faceCheckbox">Face Only?</label>
        <input type="checkbox" id="faceCheckbox">
            </div>

            <button type="submit" class="btn-submit">Submit</button>
        </form>
        <div class="result"></div>
        <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
    </div>
</div>
   





      

  <script>
    document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("remakeai-form");
    const fileInput = document.getElementById('file');
    const fileNameSpan = document.getElementById('file-name');
    const progressBar = document.getElementById('progress-bar');
    const progressContainer = document.querySelector('.progress-container');
    const resultDiv = document.querySelector(".result");

    let simulatedProgressInterval;
    let simulatedProgress = 0;

    fileInput.addEventListener('change', function() {
        fileNameSpan.textContent = this.files[0].name;
    });

    form.addEventListener("submit", async function(event) {
        event.preventDefault();

        const file = fileInput.files[0];
        const compressedFile = await compressImage(file);

        const formData = new FormData();
        formData.append('file', compressedFile, file.name);
        // Append other form data
        const styleSelect = document.getElementById("styleSelect");
        const faceCheckbox = document.getElementById("faceCheckbox");
        const style = styleSelect.value;
        const if_face = faceCheckbox.checked ? "Yes" : "No";
        formData.append('Style', style);
        formData.append('if_face', if_face);

        // Reset and show the progress bar
        progressBar.style.width = '0%';
        progressContainer.style.display = 'block';
        simulatedProgress = 0;

        // Clear previous result
        resultDiv.innerHTML = '';

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/inference/", true);
        xhr.responseType = 'blob'; // Ensure the response is treated as a Blob

        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                const percentComplete = (event.loaded / event.total) * 100;
                updateProgressBar(percentComplete);
            }
        };

        xhr.onloadstart = function() {
            // Start simulating progress during backend processing
            simulateBackendProcessingProgress();
        };

        xhr.onload = function() {
            clearInterval(simulatedProgressInterval); // Stop simulation
            if (xhr.status === 200) {
                const resultBlob = xhr.response;
                const resultURL = URL.createObjectURL(resultBlob);

                const originalURL = URL.createObjectURL(file);

                // Debugging: Check the URLs and Blob objects
                console.log("Original URL:", originalURL);
                console.log("Result URL:", resultURL);
                console.log("Result Blob:", resultBlob);

                resultDiv.innerHTML = `
                    <h2>Result</h2>
                    <div class="result-images">
                        <img src="${originalURL}" alt="Original Image" class="result-image">
                        <span class="arrow">↓</span>
                        <img src="${resultURL}" alt="Result Image" class="result-image">
                    </div>
                `;

                // Create and append the download button
                const downloadButton = document.createElement('a');
                downloadButton.href = resultURL;
                downloadButton.download = 'result.jpg';
                downloadButton.textContent = 'Download Result';
                downloadButton.className = 'btn-download';
                resultDiv.appendChild(downloadButton);

                updateProgressBar(100);
            } else {
                resultDiv.innerHTML = `<p class="error-message">Error: ${xhr.statusText}</p>`;
                updateProgressBar(0);
            }

            setTimeout(() => {
                progressContainer.style.display = 'none';
            }, 1000);
        };

        xhr.onerror = function() {
            clearInterval(simulatedProgressInterval); // Stop simulation
            resultDiv.innerHTML = `<p class="error-message">Error: Network Error</p>`;
            updateProgressBar(0);

            setTimeout(() => {
                progressContainer.style.display = 'none';
            }, 1000);
        };

        xhr.send(formData);
    });

    async function compressImage(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.src = event.target.result;
                img.onload = function() {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    // Calculate the new dimensions to resize the image while maintaining aspect ratio
                    const maxWidth = 1000;
                    const maxHeight = 1000;
                    let width = img.width;
                    let height = img.height;
                    if (width > height) {
                        if (width > maxWidth) {
                            height *= maxWidth / width;
                            width = maxWidth;
                        }
                    } else {
                        if (height > maxHeight) {
                            width *= maxHeight / height;
                            height = maxHeight;
                        }
                    }
                    // Set the canvas dimensions
                    canvas.width = width;
                    canvas.height = height;
                    // Draw the image on the canvas with the new dimensions
                    ctx.drawImage(img, 0, 0, width, height);
                    // Convert canvas content to a blob
                    canvas.toBlob((blob) => {
                        resolve(blob);
                    }, 'image/jpeg', 0.7); // Adjust quality as needed (0.7 is 70% quality)
                }
            }
            // Read the file as data URL
            reader.readAsDataURL(file);
        });
    }

    function updateProgressBar(percentComplete) {
        progressBar.style.width = percentComplete + '%';
        updateProgressBarColor(percentComplete);
    }

    function updateProgressBarColor(percentComplete) {
        const startColor = "#ff0000"; // Red
        const endColor = "#0056b3"; // Blue
        const currentColor = interpolateColor(startColor, endColor, percentComplete / 100);
        progressBar.style.backgroundColor = currentColor;
    }

    function interpolateColor(color1, color2, factor) {
        const result = color1.slice(1).match(/.{2}/g).map((hex, i) => {
            return Math.round(parseInt(hex, 16) * (1 - factor) + parseInt(color2.slice(1).match(/.{2}/g)[i], 16) * factor);
        });
        return `#${result.map(val => val.toString(16).padStart(2, '0')).join('')}`;
    }

    function simulateBackendProcessingProgress() {
        simulatedProgressInterval = setInterval(() => {
            simulatedProgress += 1; // Increment progress by 1%
            if (simulatedProgress < 90) { // Cap the simulated progress at 90%
                updateProgressBar(simulatedProgress);
            } else {
                clearInterval(simulatedProgressInterval); // Stop simulation at 90%
            }
        }, 200); // Update every 200ms
    }
});
  </script>

  
   <style>

   .ai-tool-container body{
    font-family: 'Barlow Condensed', sans-serif;
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    direction: ltr; 
}

.ai-tool-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    direction: ltr; 
      width: 90%; /* Default width for mobile */
    margin: 20px auto; /* Center the container */
       display: flex;
    flex-direction: column;
    justify-content: space-between; /* Adjust space between items */
}

.ai-tool-container  h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.ai-tool-container  .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.ai-tool-container 
 input[type="file"] {
    display: none;
}

.ai-tool-container  .custom-file-upload {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    transition: background 0.3s;
}

.ai-tool-container  .custom-file-upload:hover {
    background-color: #0056b3;
}

.ai-tool-container  #file-name {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

.ai-tool-container  .radio-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.ai-tool-container  .btn-submit {
    background: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.ai-tool-container  .btn-submit:hover {
    background: #0056b3;
}

.ai-tool-container  .result {
    margin-top: 20px;
}

.ai-tool-container  .result h2 {
    font-size: 20px;
    color: #333;
}

.ai-tool-container  .result-image {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.ai-tool-container  .result-image:hover {
    transform: scale(1.05);
}

.ai-tool-container  .error-message {
    color: red;
    font-size: 16px;
}

     

.ai-tool-container .progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
    display: none;
}

   .ai-tool-container .progress-bar {
    height: 10px;
    width: 0%;
    transition: width 0.4s ease, background-color 0.4s ease;
}
.ai-tool-container .result-images {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-tool-container .result-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ai-tool-container .result-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    margin: 10px 0;
}

.ai-tool-container .result-image:hover {
    transform: scale(1.05);
}

.ai-tool-container .arrow {
    font-size: 24px;
    color: #333;
    margin: 10px 0;
  }

    .ai-tool-container .btn-download {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #708090;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.ai-tool-container .btn-download:hover {
    background-color: #218838;
     }
     
/* Media Queries for larger screens */
@media (min-width: 600px) {
    .ai-tool-container {
        width: 1024px;
        height: auto; /* Ensure height adjusts dynamically */
        padding: 100px; /* Increase padding */
    }
}

@media (min-width: 768px) {
    .ai-tool-container {
        width: 1024px; /* Match image width */
        height: auto; /* Match image height */
        padding: 100px; /* Increase padding */
    }
}

@media (min-width: 992px) {
    .ai-tool-container {
        width: 1024px; /* Match image width */
        height: auto; /* Match image height */
        padding: 100px; /* Increase padding */
    }
}

@media (min-width: 1200px) {
    .ai-tool-container {
        width: 1024px; /* Match image width */
        height: auto; /* Match image height */
        padding: 100px; /* Increase padding */
    }
}
    
    </style>
</div>