| | <!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; |
| | text-align: left; |
| | font-family: monospace; |
| | white-space: pre-wrap; |
| | } |
| | </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"> |
| | |
| | <div class="flex items-center space-x-4 mb-4 sm:mb-0 w-full sm:w-auto justify-center sm:justify-start"> |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | <img src="{{ url_for('static', filename='images/logo_black.png') }}" alt="KrongAI" class="squared-full shadow-sm" height="150cqh"> |
| | </div> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | |
| | <div class="w-full sm:w-auto flex justify-center sm:justify-end"> |
| | |
| | <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'); |
| | |
| | |
| | var link = document.createElement('a'); |
| | link.href = "{{ url_for('download', download='annotations_pascal_voc.csv') }}"; |
| | link.download = 'my_file.txt'; |
| | document.body.appendChild(link); |
| | link.click(); |
| | document.body.removeChild(link); |
| | |
| | |
| | setTimeout(function() { |
| | |
| | window.location.href = "{{ url_for('index') }}"; |
| | }, 3000); |
| | }); |
| | </script> |
| | </div> |
| | </center> |
| | </div> |
| | |
| | <footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl"> |
| | Thanks Huggingface Spaces 🤗 |
| | </footer> |
| | </body> |
| | </html> |
| |
|
