Spaces:

Ashrafb
/

Bwcdocke

Paused

App Files Files Community

Bwcdocke / AB /Indexcompress.html

Ashrafb

Create Indexcompress.html

a376039 verified about 2 years ago

raw

history blame contribute delete

12.2 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 */
	#uploadForm {
	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 face number inputs */
	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 */
	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); }
	}
	#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="uploadForm" action="/upload/" 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')"><br>
	<div id="sourceImageContainer">
	<img id="sourceImage">
	</div><br>
	<button type="button" onclick="uploadFile()">Generate </button> <!-- Changed to type="button" and added onclick handler -->
	</form>
	<div id="resultImage">
	<div id="estimatedTime" style="display: none;">Estimated time: 120s</div>
	<div id="loadingSpinner" style="display: none;">
	<!-- Replace this with your loading spinner HTML/CSS -->
	</div>
	<div id="resultContainer">




	<a id="download-link" href="#" download="colorized_image.jpg" style="display:none;">Download Colorized Image</a>
	</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;">`;
	}



	function displayColorizedImage(blob) {
	const url = URL.createObjectURL(blob);
	const resultContainer = document.getElementById('resultContainer');
	resultContainer.innerHTML = `<img src="${url}" alt="Colorized Image" width="400">`;
	const downloadLink = document.getElementById('download-link');
	downloadLink.href = url;
	downloadLink.style.display = 'block';
	}



	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 if both images are uploaded
	resultContainer.innerHTML = "";

	// Get the selected file from the source file input
	const file = sourceFileInput.files[0];

	// Compress the selected image file
	const compressedFile = await compressImage(file);

	// Create a FormData object and append the compressed file
	const formData = new FormData();
	formData.append('file', compressedFile);

	try {
	// Display loading spinner
	const loadingSpinner = document.getElementById('loadingSpinner');
	loadingSpinner.style.display = 'block';

	// Send the compressed file to the server
	const response = await fetch('https://ashrafb-bwcdocke.hf.space/upload/', {
	method: 'POST',
	body: formData
	});

	if (response.ok) {
	// If successful response, display the result image
	const blob = await response.blob();
	displayColorizedImage(blob);
	} 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 uploading file:', 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>
	</body>
	</html>