static/index3.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">
   <h3>Aiconvert.online </h3>
    <form id="uploadForm" action="/upload/" method="post" enctype="multipart/form-data">
       <label for="sourceFile" id="uploadLabel">Choose image </label>
<input type="file" id="sourceFile" name="source_file" accept="image/*" required onchange="previewImage(event, 'sourceImage')"><br>
<div id="sourceImageContainer">
    <img id="sourceImage"src="https://aiconvert.online/wp-content/uploads/2024/07/Source-Image.jpg" width="200" height="100" alt="uploaded Image">
</div><br>
<button type="button" onclick="uploadFile()">Generate </button>  <!-- Changed to type="button" and added onclick handler -->
    </form>
    <div id="resultImage">
   <div id="loadingSpinner" style="display: none;">
             <!-- Replace this with your loading spinner HTML/CSS -->
        </div>
        <div id="resultContainer"></div>
      </div>
<button id="downloadButton" style="display: block ;" onclick="downloadResultImage()">Download </button>

   
  

   


  <script>
 function previewImage(event) {
            const file = event.target.files[0];
            const imagePreview = document.getElementById('sourceImageContainer');
            imagePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;">`;
        }
        
        async function uploadFile() {
            const sourceFileInput = document.getElementById('sourceFile');
           const resultContainer = document.getElementById('resultContainer');

 

  // Check if both source and destination file inputs are empty
    if (!sourceFileInput.files[0] ) {
        // Update the result container with the error message
        resultContainer.innerHTML = "<p>Please upload an image.</p>";
        return;
    }

    // Clear the result container if both images are uploaded
    resultContainer.innerHTML = "";
const compressedFile = await compressImage(sourceFile.files[0]);
          const formData = new FormData();
        formData.append('file', compressedFile);
            
               
      try {
        // Display loading spinner
        const loadingSpinner = document.getElementById('loadingSpinner');
        loadingSpinner.style.display = 'block';

          const response = await fetch('https://ashrafb-itsdockertest.hf.space/upload/', {
                method: 'POST',
                body: formData
            });
 if (response.ok) {
            // If successful response, display the result image
           const data = await response.json();
            const sketchImage = document.createElement('img');
            sketchImage.style.maxWidth = '100%'; // Adjust this value as needed
            sketchImage.style.maxHeight = '100%'; // Adjust this value as needed
            sketchImage.src = data.sketch_image_base64;
            resultContainer.appendChild(sketchImage);

        } else {
            // If server error, display the error message
            const errorMessage = await response.text();
            resultContainer.innerHTML = `<p>Oops! Something went wrong. Please try again later. </p>`;
        }
             // Hide loading spinner after result (or error message) is displayed
        loadingSpinner.style.display = 'none';
    } catch (error) {
        console.error('Error swapping faces:', error);
        // Hide loading spinner if there's an error
        const loadingSpinner = document.getElementById('loadingSpinner');
        loadingSpinner.style.display = 'none';
    }
}

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', 1); // Adjust quality as needed (0.7 is 70% quality)
            }
        }

        // Read the file as data URL
        reader.readAsDataURL(file);
    });
   } 

           function downloadResultImage() {
    const resultImage = document.getElementById('resultContainer').querySelector('img');
    const link = document.createElement('a');
    link.href = resultImage.src;
    link.download = 'result_image.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}


  </script>

  
   <style>
   	.ai-tool-container {
    background-color: #121212;
    color: #FFFFFF;
    direction: ltr; /* Explicitly set direction to LTR */
}





/* Dark mode for face number inputs */
   .ai-tool-container  input[type="number"] {
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #555555;
}

/* Dark mode for swap button */
   .ai-tool-container  button[type="button"] {
    background-color: #1E7E34;
}

/* Dark mode hover effect for swap button */
   .ai-tool-container  button[type="button"]:hover {
    background-color: #2E9E44;
}

  /* Style for upload buttons */
   .ai-tool-container  input[type="file"] {
    display: none; /* Hide the default file input */
}



/* Style for file input labels */
   .ai-tool-container  #uploadForm {
    display: flex;
    flex-direction: column;
    align-items: center;
}

   .ai-tool-container  #uploadLabel {
    padding: 10px 20px;
    background-color: #8b0000;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
}



/* Style for face number inputs */
   .ai-tool-container  input[type="number"] {
    padding: 8px;
    Width :50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px;
    font-size: 16px;
}

/* Style for labels */
   .ai-tool-container  label {
    font-weight: bold;
}

/* Optional: Increase space between elements */
   .ai-tool-container  form > * {
    margin-bottom: 10px;
}
/* Style for the swap button */
   .ai-tool-container  button[type="button"] {
    background-image: linear-gradient(
  45deg,
  hsl(240deg 75% 29%) 0%,
  hsl(254deg 78% 28%) 6%,
  hsl(264deg 82% 27%) 13%,
  hsl(272deg 87% 26%) 19%,
  hsl(278deg 93% 25%) 25%,
  hsl(284deg 98% 24%) 31%,
  hsl(289deg 100% 23%) 37%,
  hsl(294deg 100% 23%) 44%,
  hsl(299deg 100% 22%) 50%,
  hsl(303deg 100% 23%) 56%,
  hsl(307deg 100% 24%) 63%,
  hsl(311deg 100% 25%) 69%,
  hsl(313deg 100% 26%) 75%,
  hsl(316deg 95% 28%) 81%,
  hsl(320deg 88% 30%) 87%,
  hsl(323deg 81% 32%) 94%,
  hsl(326deg 75% 33%) 100%
);
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    display: block; /* Change display property to block */
    margin: 0 auto;
    Width :200px;
}

/* Hover effect for the swap button */
   .ai-tool-container  button[type="button"]:hover {
    background-color: #45a049;
}
   .ai-tool-container  h3 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Barlow Condensed';
    color: pink;
    font-size: 24px; /* Adjust the font size as needed */
}

    


          .ai-tool-container #resultImage {
            border: 2px solid blue;
            width: 269px;
            height: 300px;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            margin: auto;
            margin-top: 30px;
            padding-bottom: 7px;
            gap: 14px;
            background: linear-gradient(black , black) padding-box,
                        linear-gradient(to right, red, blue) border-box;
            border-radius: 20px;
            border: 2.5px solid transparent;
        }

         .ai-tool-container  #sourceImageContainer, #destinationImageContainer {
            border: 2px solid blue;
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            margin: auto;
            margin-top: 30px;
            padding-bottom: 7px;
            gap: 100px;
            background: linear-gradient(black , black) padding-box,
                        linear-gradient(to right, red, blue) border-box;
            border-radius: 20px;
            border: 2.5px solid transparent;
        }

         .ai-tool-container  #sourceImage, #destinationImage {
            max-width: 100%;
            height: auto;
            display: block;
            margin: auto;
        }

          .ai-tool-container #loadingSpinner {
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 5px solid #ffffff;
            width: 20px;
            height: 20px;
            animation: spin 2s linear infinite;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; /* Initially hide the loading spinner */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .ai-tool-container #downloadButton{
      
    background-image: linear-gradient(
  45deg,
  hsl(240deg 75% 29%) 0%,
  hsl(254deg 78% 28%) 6%,
  hsl(264deg 82% 27%) 13%,
  hsl(272deg 87% 26%) 19%,
  hsl(278deg 93% 25%) 25%,
  hsl(284deg 98% 24%) 31%,
  hsl(289deg 100% 23%) 37%,
  hsl(294deg 100% 23%) 44%,
  hsl(299deg 100% 22%) 50%,
  hsl(303deg 100% 23%) 56%,
  hsl(307deg 100% 24%) 63%,
  hsl(311deg 100% 25%) 69%,
  hsl(313deg 100% 26%) 75%,
  hsl(316deg 95% 28%) 81%,
  hsl(320deg 88% 30%) 87%,
  hsl(323deg 81% 32%) 94%,
  hsl(326deg 75% 33%) 100%
);
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    display: block; /* Change display property to block */
    margin: 0 auto;
    Width :200px;
}
    </style>
</div>