Hugging Face's logo

Spaces:
Artixiban
/
Imlidr
Running

App Files Community
Imlidr / index.html
Artixiban's picture
Artixiban
Update index.html
ac3fe44 verified
raw history blame contribute delete
No virus
12.9 kB
<!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>