Furdockgr1

Running

File size: 10,644 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <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">
    <style>
body {
    background-color: #121212;
    color: #FFFFFF;
}

/* Dark mode for upload buttons */
#upload-form button[type="button"] {
    background-color: #1E7E34;
}

/* Dark mode for file input labels */
.uploadLabel {
    background-color: #BF2C25;
}

/* Dark mode for face number inputs */
#scale {
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #555555;
}

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

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

/* Style for upload buttons */
input[type="file"] {
    display: none; /* Hide the default file input */
}
#upload-form label[for="image"] {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
}

.uploadButton {
    background-color: #4CAF50;
    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;
    margin: auto;
    margin: 0 auto;
}

/* Style for file input labels */
#upload-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uploadLabel {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.uploadLabel input[type="file"] {
    display: none;
}

/* Style for face number inputs */
#version, #scale {
    padding: 8px;
    Width :50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px;
    font-size: 16px;
}

/* Style for labels */
label {
    font-weight: bold;
}

/* Optional: Increase space between elements */
form > * {
    margin-bottom: 10px;
}

/* Style for the swap button */
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;
    margin: 0 auto;
    width: 200px;
}

/* Hover effect for the button */
button:hover {
    background-color: #45a049;
}
/* Style for file input */
#image {
    display: none; /* Hide the default file input */
}

.uploadLabel {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
}

.uploadLabel input[type="file"] {
    display: none;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Barlow Condensed';
    color: pink;
    font-size: 40px; /* Adjust the font size as needed */
}

h2 {
    font-size: 24px; /* Adjust size as needed */
    font-family: 'Barlow Condensed';
    color: #FFFFFF; /* Text color */
    margin-top: 20px; /* Top margin */
    margin-bottom: 10px; /* Bottom margin */
}

select {
    width: 150px; /* Adjust width as needed */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #333333; /* Background color */
    color: white; /* Text color */
    font-size: 16px;
}
#version{
	width :60px;
	}
/* Style for the scale number input */
input[type="number"]#scale {
    padding: 8px;
    width: 50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px;
    font-size: 16px;
    color: white; /* Set text color to white */
    background-color: #333333; /* Set background color */
}

/* Optional: Adjust focus styling for the scale number input */
input[type="number"]#scale:focus {
    outline: none; /* Remove default outline */
    border-color: #1E7E34; /* Change border color on focus */
}

#estimatedTime {
    display: none;
    text-align: center; /* Center align the text */
    margin-top: 10px; /* Add margin to separate it from the spinner */
    color: white; /* Set text color */
}

#resultImage {
    border: 2px solid blue;
    width: 265px;
    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;
}



#resultContainer img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}
   #image-preview {
            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;
        }

        #sourceImage {
            max-width: 100%;
            height: auto;
            display: block;
            margin: auto;
        }
#loadingSpinner {
    border: 3px 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); }
}
</style>
</head>
<body>
    <h1>Aiconvert.online</h1>
    <form id="upload-form" enctype="multipart/form-data">
        
<label for="image">Select image:</label>
        <input type="file" id="image" accept="image/*" required onchange="previewImage(event)">
        <div id="image-preview">
        
    <img id="sourceImage">
</div><br>
        <label for="version">Select a model version:</label>
        <select id="version" required>
            <option value="v1.2">M1</option>
            <option value="v1.3">M2</option>
            <option value="v1.4">M3</option>
         
        </select><br>
        
        <label for="scale">Select scale factor (2 or 4):</label>
        <input type="number" id="scale" min="2" max="4" value="4" required><br>
        
        <button type="button" onclick="uploadImage()">Enhance Image</button>
    </form>

    <div id="resultImage">
        <div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
        <div id="loadingSpinner" style="display: none;"></div>
        <div id="resultContainer"></div>
    </div>

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

        async function uploadImage() {
            const fileInput = document.getElementById('image');
            const versionInput = document.getElementById('version');
            const scaleInput = document.getElementById('scale');

            // Check if the file input is empty
            if (!fileInput.files[0]) {
                document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Please upload an image.</p>`;
                return;
            }

            // Clear the result container
            document.getElementById('resultContainer').innerHTML = "";
            
            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            formData.append('version', versionInput.value);
            formData.append('scale', scaleInput.value);
            
            // Display loading spinner
            const loadingSpinner = document.getElementById('loadingSpinner');
            loadingSpinner.style.display = 'block';
            const estimatedTime = document.getElementById('estimatedTime');
            estimatedTime.style.display = 'block';
            try {
                const response = await fetch('/upload/', {
                    method: 'POST',
                    body: formData
                });

                // Hide loading spinner
                loadingSpinner.style.display = 'none';
                estimatedTime.style.display = 'none';
                if (response.ok) {
                    const resultContainer = document.getElementById('resultContainer');
                    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 {
                    document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
                }
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('resultContainer').innerHTML = `<p style="color: white;">Oops! Something went wrong. Please try again later.</p>`;
            }
        }
    </script>
</body>
</html>