File size: 5,838 Bytes
9bbf7fe eb6e44b 9bbf7fe 4326477 9bbf7fe 8648e96 9bbf7fe 2c77050 9bbf7fe 4326477 f178216 9bbf7fe 4326477 9bbf7fe 2c77050 9bbf7fe f178216 9bbf7fe 44e752e 9bbf7fe |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!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">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
.python-code-block {
border: 1px solid #ddd;
padding: 15px;
margin-left: 20px; /* Adjust this value for left alignment */
text-align: left; /* Ensures text within the block is left-aligned */
font-family: monospace;
white-space: pre-wrap; /* Preserves whitespace and wraps long lines */
}
</style>
</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 jsonl 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>
<h5>You can use <code>datasets</code> package of huggingface to load the downloaded dataset. See demo code below.</h5>
<div class="python-code-block">
<pre><code class="language-python">
from datasets import load_dataset
your_data = load_dataset('imagefolder', data_dir='annotated_data') # this will use metadata.jsonl in annotated_data to create your_data
print(your_data)
# optional: you can easily plot one instance of your_data in jupyter notebook
import torch
from torchvision.utils import draw_bounding_boxes
from torchvision.transforms.functional import pil_to_tensor, to_pil_image
example = your_data['train'][0]
boxes_xyxy = torch.tensor(example['objects']['bbox'])
labels = [x for x in example['objects']['names']]
to_pil_image(
draw_bounding_boxes(
pil_to_tensor(example['image'].convert('RGB')),
boxes_xyxy,
colors="red",
labels=labels,
)
)
</code></pre>
</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>
|