Spaces:

KrorngAI
/

image-annotator-object-detection

Running

App Files Files Community

image-annotator-object-detection / templates /final.html

Kimang18

update instruction

44e752e 6 months ago

raw

history blame

4.18 kB

	<!doctype html>
	<html style="height:100%;">
	<head>
	<title>Download Your Annotations</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
	<header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
	<!-- Left Section: Two Logos -->
	<div class="flex items-center space-x-4 mb-4 sm:mb-0 w-full sm:w-auto justify-center sm:justify-start">
	<!-- Logo 1
	<img src="{{ url_for('static', filename='images/AI-FARM-logo-version 2 -20-JULY-2023-01.png') }}" alt="AIFarm" class="squared-full shadow-sm" height="75px" width="75px">
	-->
	<!-- Logo 1
	<img src="{{ url_for('static', filename='images/FACTORYAI-FINAL-SQUARE-16-AUG-2023.png') }}" alt="FactoryAI" class="squared-full shadow-sm">
	-->
	<!-- Logo 2 -->
	<img src="{{ url_for('static', filename='images/logo_black.png') }}" alt="KrongAI" class="squared-full shadow-sm" height="150cqh">
	</div>

	<!-- Middle Section: Title -->
	<div class="flex-grow text-center mb-4 sm:mb-0 order-first sm:order-none w-full sm:w-auto">
	<h1 class="text-3xl sm:text-4xl font-bold text-gray-800 leading-tight">
	🇰🇭 For the development of AI 🇰🇭
	</h1>
	</div>

	<!-- Right Section: Placeholder (can be used for user avatar/menu later) -->
	<!-- Added a placeholder to help balance the flex layout, though not strictly required by prompt -->
	<div class="w-full sm:w-auto flex justify-center sm:justify-end">
	<!-- Placeholder for potential future elements, e.g., user icon -->
	<div class="w-[128px] h-0 sm:h-[60px]"></div>
	</div>
	</header>

	<div class="container" style="margin-top:20px;">
	<center>
	<div class="jumbotron">
	<h2>Download the annotations as CSV File</h2>
	<h3>The annotations are in Pascal VOC format</h3>
	<button id="downloadButton" style="margin-top:10px;" class="btn btn-success">Download</button>
	<div id="messageBox" class="mt-8 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg hidden" role="alert">
	<p id="messageText" class="font-medium"></p>
	</div>
	<script>
	document.getElementById('downloadButton').addEventListener('click', function() {
	var messageBox = document.getElementById('messageBox');
	var messageText = document.getElementById('messageText');
	messageText.textContent = 'Good luck with your project!';
	messageBox.classList.remove('hidden', 'bg-red-100', 'border-red-400', 'text-red-700', 'bg-green-100', 'border-green-400', 'text-green-700', 'bg-blue-100', 'border-blue-400', 'text-blue-700');
	messageBox.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
	messageBox.classList.remove('hidden');

	// Trigger the download by creating a temporary link and clicking it
	var link = document.createElement('a');
	link.href = "{{ url_for('download', download='annotations_pascal_voc.csv') }}";
	link.download = 'my_file.txt'; // This is optional but good practice
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);

	// Now, redirect the user after a short delay
	setTimeout(function() {

	window.location.href = "{{ url_for('index') }}";
	}, 3000); // 1000ms = 1 second delay. Adjust as needed.
	});
	</script>
	</div>
	</center>
	</div>
	<!-- FOOTER ADDED HERE -->
	<footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl">
	Thanks Huggingface Spaces 🤗
	</footer>
	</body>
	</html>