Spaces:

WebashalarForML
/

ImageDataExtractor2

Running

App Files Files Community

ImageDataExtractor2 / templates /index.html

WebashalarForML

Update templates/index.html

4d91180 verified over 1 year ago

raw

history blame contribute delete

9.15 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>AI Data Extractor</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
	<style>
	body {
	background-color: #1c1c1e;
	font-family: "Poppins", sans-serif;
	color: #f5f5f7;
	margin: 0;
	}

	h1 {
	color: #e5e5e7;
	text-align: center;
	margin-bottom: 20px;
	}

	.container {
	margin-top: 70px;
	}

	.file-upload-section {
	background-color: #2c2c2e;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	text-align: center;
	}

	.file-upload-section input[type="file"] {
	margin: 20px 0;
	}

	.file-upload-section input[type="submit"] {
	background-color: #ee4410;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	transition: background-color 0.3s ease;
	}

	.file-upload-section input[type="submit"]:hover {
	background-color: #ee4410;
	}

	.file-actions a {
	margin: 0 10px;
	text-decoration: none;
	color: #ee4410;
	}

	.file-actions a:hover {
	color: #ee4410;
	}

	.flash-message {
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 5px;
	color: #333;
	}

	.alert {
	text-align: center;
	position: sticky;
	top: 0;
	right: 15%;
	}

	/* Loader styles */
	.loader {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #ee4410;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite;
	margin: 20px auto;
	display: none;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	/* Top bar styles */
	.top-bar {
	background-color: #333;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.top-bar h2 {
	color: white;
	}

	/* Navigation tab styles */
	.tab {
	display: flex;
	gap: 10px;
	}

	.tab button {
	background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 16px;
	transition: 0.3s;
	font-size: 17px;
	color: white;
	}

	.tab button:hover {
	background-color: #575757;
	cursor: pointer;
	}

	.tab button.active {
	background-color: #ee4410;
	}

	/* Tab content styles */
	.tabcontent {
	display: none;
	padding: 20px;
	margin-top: 70px;
	}
	.disabled {
	cursor: not-allowed !important;
	opacity: 0.6;/* Set cursor to not-allowed */
	}

	/* Responsive design */
	@media (max-width: 768px) {
	.tab {
	flex-direction: column;
	}
	}
	</style>
	</head>

	<body>
	<!-- Locked Top Bar with Tabs -->
	<div class="top-bar">
	<h2>AI Data Extractor</h2>
	<!-- Navigation Tabs -->
	<div class="tab">
	<button class="tablinks active" onclick="openLink('https://webashalarforml-imagedataextractor2.hf.space/', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
	<button class="tablinks" onclick="openLink('https://webashalarforml-resumeextractor2.hf.space/', this, '#ff4d00')">Resume Data Extractor</button>
	</div>
	</div>
	<div class="container">
	<h1>Visiting Card Data Extractor</h1>
	<div class="file-upload-section">
	<form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
	<input type="file" name="files" multiple class="form-control" required />
	<input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
	</form>

	{% if session.get('uploaded_files') %}
	<p class="mt-4">
	Uploaded:
	<span class="text-danger">{{ session.get('uploaded_files') }}</span>
	</p>
	<form action="{{ url_for('remove_file') }}" method="post">
	<button type="submit" class="btn btn-outline-danger">
	<i class="bi bi-trash"></i> Remove Uploaded File
	</button>
	</form>
	{% endif %}
	</div>

	<div class="container">
	<!-- Loader -->
	<div class="loader" id="loader"></div>
	</div>

	{% with messages = get_flashed_messages() %} {% if messages %}
	<div class="alert alert-success mt-4" id="flash-message">
	{{ messages[0] }}
	</div>
	{% endif %} {% endwith %}
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	// Loader functionality
	document.getElementById('fileUploadForm').onsubmit = function() {
	document.getElementById('loader').style.display = 'block';

	// Disable the tab buttons and apply disabled class
	const buttons = document.querySelectorAll('.tab button');
	buttons.forEach(button => {
	button.setAttribute('disabled', 'true');
	button.classList.add('disabled'); // Add disabled class
	});

	// Show processing message
	const processingMessage = document.createElement('p');
	processingMessage.id = 'processing-message';
	processingMessage.textContent = 'Processing, please wait...';
	processingMessage.style.color = '#e68a10'; // Style as needed
	document.querySelector('.file-upload-section').appendChild(processingMessage);
	};

	// Flash message auto-hide
	setTimeout(function () {
	let flashMessage = document.getElementById("flash-message");
	if (flashMessage) {
	flashMessage.style.transition = "opacity 1s ease";
	flashMessage.style.opacity = 0;
	setTimeout(() => flashMessage.remove(), 1000);
	}

	// After processing is complete (You can adjust this based on your logic)
	const processingMessage = document.getElementById('processing-message');
	if (processingMessage) {
	processingMessage.remove(); // Remove the processing message
	}

	// Re-enable tab buttons and remove disabled class
	const buttons = document.querySelectorAll('.tab button');
	buttons.forEach(button => {
	button.removeAttribute('disabled');
	button.classList.remove('disabled'); // Remove disabled class
	});
	}, 3000); // Adjust timing based on your upload duration

	// Function to open links in the same tab
	function openLink(url, element) {
	window.location.href = url; // Redirects to the specified URL in the same tab

	// Remove "active" class from all buttons
	const buttons = document.querySelectorAll('.tab button');
	buttons.forEach(button => button.classList.remove('active'));

	// Add "active" class to the clicked button
	element.classList.add('active');
	}
	//Refreshing the cookie
	function setCookie(name, value, days) {
	let expires = "";
	if (days) {
	const date = new Date();
	date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
	expires = "; expires=" + date.toUTCString();
	}
	document.cookie = name + "=" + (value \|\| "") + expires + "; path=/";
	}

	function deleteCookie(name) {
	document.cookie = name + '=; Max-Age=0; path=/;'; // Delete the cookie
	}

	// Set the cookie (you can comment this out after testing)
	setCookie('myCookie', 'myValue', 1); // Sets a cookie for demonstration

	// Automatically delete the cookie when the page is loaded or refreshed
	window.onload = function() {
	deleteCookie('myCookie'); // Replace 'myCookie' with your cookie name
	}
	</script>
	</body>

	</html>