Spaces:

Ashrafb
/

Imlidrdokefast

Paused

App Files Files Community

Ashrafb commited on Apr 14, 2024

Commit

4ded6a3

verified ·

1 Parent(s): 49b7af6

Create Indexcompress.html

Browse files

Files changed (1) hide show

static/Indexcompress.html +420 -0

static/Indexcompress.html ADDED Viewed

	@@ -0,0 +1,420 @@

+<!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 */
+.uploadButton {
+    background-color: #1E7E34;
+}
+/* Dark mode for file input labels */
+.uploadLabel {
+    background-color: #BF2C25;
+}
+/* Dark mode for face number inputs */
+input[type="number"] {
+    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 */
+}
+.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;
+}
+/* Style for file input labels */
+#predict {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.uploadLabel {
+    padding: 10px 20px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+}
+.uploadLabel input[type="file"] {
+    display: none;
+}
+/* Style for labels */
+label {
+    font-weight: bold;
+}
+/* Optional: Increase space between elements */
+form > * {
+    margin-bottom: 10px;
+}
+/* Style for the swap button */
+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 */
+button[type="button"]:hover {
+    background-color: #45a049;
+}
+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 */
+}
+        #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;
+        }
+        #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;
+        }
+        #sourceImage, #destinationImage {
+            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); }
+        }
+        /* Style for version selection */
+#version {
+    font-size: 18px; /* Adjust size as needed */
+    font-family: 'Barlow Condensed', sans-serif; /* Use the specified font */
+    color: #FFFFFF; /* Text color */
+    margin-bottom: 5px; /* Bottom margin */
+      padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 5px;
+    font-size: 28px;
+    Width :200px;
+    text-align: center;
+}
+/* Style for the radio buttons */
+input[type="radio"] {
+    margin-right: 30px; /* Add some space between radio button and label */
+}
+/* Style for the labels of radio buttons */
+label[for="simple"], label[for="complex"] {
+    font-family: 'Barlow Condensed', sans-serif; /* Use the specified font */
+    color: #FFFFFF; /* Text color */
+    margin-right: 10px; /* Add some space between label and next element */
+       font-size: 20px;
+}
+#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>
+</head>
+<body>
+    <h1>Aiconvert.online </h1>
+    <form id="predict" action="/predict/" method="post" enctype="multipart/form-data">
+        <label for="sourceFile" class="uploadLabel">Choose image </label>
+        <input type="file" id="sourceFile" name="source_file" accept="image/*" required onchange="previewImage(event, 'sourceImage')">
+        <div id="sourceImageContainer">
+            <img id="sourceImage">
+        </div><br>
+        <label for="version" id="version" > Version:</label><br>
+        <input type="radio" id="simple" name="version" value="Simple Lines" >
+        <label for="simple">Simple Lines</label><br>
+        <input type="radio" id="complex" name="version" value="Complex Lines"checked >
+        <label for="complex">Complex Lines</label><br><br>
+        <button type="button">Generate </button>
+    </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 source file input is 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
+            resultContainer.innerHTML = "";
+    // Compress the image to 500 KB before sending
+    const compressedFile = await compressImage(sourceFile.files[0]);
+            const formData = new FormData();
+            formData.append('file', compressedFile);
+            formData.append('version', document.querySelector('input[name="version"]:checked').value);
+            try {
+                // Display loading spinner
+                const loadingSpinner = document.getElementById('loadingSpinner');
+                loadingSpinner.style.display = 'block';
+                const response = await fetch('https://ashrafb-imlidrdokefast.hf.space/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+                if (response.ok) {
+                    const blob = await response.blob();
+                    const imageUrl = URL.createObjectURL(blob);
+                    resultContainer.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
+                } 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>`;
+                }
+            } catch (error) {
+                console.error('Error converting image to line drawing:', error);
+                // Display error message
+                resultContainer.innerHTML = `<p>Oops! Something went wrong. Please try again later</p>`;
+            }
+            // Hide loading spinner if there's an error
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'none';
+        }
+        const generateButton = document.querySelector('button');
+        generateButton.addEventListener('click', uploadFile);
+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>
+</body>
+</html>