Spaces:

Ashrafb
/

Cintdogfast

Paused

App Files Files Community

Ashrafb commited on Apr 14, 2024

Commit

28c18e0

verified ·

1 Parent(s): 07f0aab

Create Indexcompress.html

Browse files

Files changed (1) hide show

static/Indexcompress.html +497 -0

static/Indexcompress.html ADDED Viewed

	@@ -0,0 +1,497 @@

+<!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">
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+<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 */
+#image-label {
+    background-color: #BF2C25;
+}
+/* Dark mode for face number inputs */
+#best_max_flavors {
+    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;
+}
+#image-label {
+    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;
+}
+#image-label {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    display: block;
+    margin: 0 auto;
+}
+#image-label input[type="file"] {
+    display: none;
+}
+/* Style for face number inputs */
+#mode, #best_max_flavors {
+    padding: 8px;
+    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 */
+}
+#image-label {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 auto;
+}
+#image-label 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;
+}
+#best_max_flavors {
+    width: 60px;
+}
+/* Style for the scale number input */
+input[type="number"]#best_max_flavors {
+    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"]#best_max_flavors: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 */
+}
+#results {
+    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;
+}
+#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: 3px 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); }
+}
+#results {
+        position: relative; /* Set position to relative */
+        /* Your existing styles */
+    }
+  #copyIcon {
+        font-size: 24px; /* Adjust the font size as needed */
+        position: absolute;
+        bottom: 10px; /* Adjust the distance from the bottom */
+        left: 10px; /* Adjust the distance from the left */
+        cursor: pointer;
+           z-index: 1;
+       color: rgba(255, 255, 255, 0.7); /* Adjust the opacity value */
+    }
+  #resultContainer {
+     /* Include padding and border in the total height */
+}
+#resultContainer p {
+    font-size: 14px; /* Adjust the font size as needed */
+    text-align: center; /* Center text horizontally */
+    margin: 5px 0; /* Add margin for spacing between paragraphs */
+    line-height: 1.5; /* Adjust line height for better readability */
+}
+ </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="mode">Select Mode</label>
+        <select id="mode" required>
+                <option value="best">Best Mode</option>
+            <option value="classic">Classic Mode</option>
+            <option value="fast" selected>Fast Mode</option>
+        </select><br>
+        <label for="best_max_flavors">Max Flavors:</label>
+        <input type="number" id="best_max_flavors"  value="4" min="2" max="24">
+        <br>
+        	   <button type="button" onclick="uploadImage()">Generate Prompt </button>
+    </form>
+    <div id="results">
+           <div id="estimatedTime" style="display: none;">Estimated time: 90s</div>
+        <div id="loadingSpinner" style="display: none;"></div>
+ <i class="far fa-copy" id="copyIcon" onclick="copyTextToClipboard()"></i>
+        <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('mode');
+    const scaleInput = document.getElementById('best_max_flavors');
+    // 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 compressedFile = await compressImage(fileInput.files[0]);
+    const formData = new FormData();
+    formData.append('file', compressedFile);
+    formData.append('mode', versionInput.value);
+    formData.append('best_max_flavors', 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('https://ashrafb-cintdogfast.hf.space/inference/', {
+            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(); // Assuming the response is JSON
+            resultContainer.innerHTML = '<h2></h2>';
+            data.prompt_results.forEach(result => {
+                resultContainer.innerHTML += '<p>' + result + '</p>';
+            });
+        } 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>`;
+    }
+}
+      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 copyTextToClipboard() {
+        const resultContainer = document.getElementById('resultContainer');
+        const textToCopy = resultContainer.innerText;
+        // Create a temporary textarea element to copy the text
+        const textarea = document.createElement('textarea');
+        textarea.value = textToCopy;
+        document.body.appendChild(textarea);
+        // Select the text inside the textarea
+        textarea.select();
+        textarea.setSelectionRange(0, 99999); // For mobile devices
+        // Copy the selected text
+        document.execCommand('copy');
+        // Remove the temporary textarea
+        document.body.removeChild(textarea);
+        // Change the copy icon text to "Copied"
+        const copyIcon = document.getElementById('copyIcon');
+        copyIcon.textContent = '  # Copied' ;
+        copyIcon.style.fontSize = '14px';
+        // Revert the copy icon back to "Copy" after 1.5 seconds
+        setTimeout(() => {
+            copyIcon.textContent = '';
+        }, 1500);
+    }
+    </script>
+</body>
+</html>