add demo code
Browse files- templates/final.html +38 -1
templates/final.html
CHANGED
|
@@ -4,6 +4,19 @@
|
|
| 4 |
<title>Download Your Annotations</title>
|
| 5 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
| 6 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
</head>
|
| 8 |
<body>
|
| 9 |
<header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
|
|
@@ -37,11 +50,35 @@
|
|
| 37 |
<div class="container" style="margin-top:20px;">
|
| 38 |
<center>
|
| 39 |
<div class="jumbotron">
|
| 40 |
-
<h2>Download the annotations as
|
| 41 |
<h3>The annotations are in Pascal VOC format</h3>
|
| 42 |
<button id="downloadButton" style="margin-top:10px;" class="btn btn-success">Download</button>
|
| 43 |
<div id="messageBox" class="mt-8 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg hidden" role="alert">
|
| 44 |
<p id="messageText" class="font-medium"></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 45 |
</div>
|
| 46 |
<script>
|
| 47 |
document.getElementById('downloadButton').addEventListener('click', function() {
|
|
|
|
| 4 |
<title>Download Your Annotations</title>
|
| 5 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
| 6 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
| 7 |
+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
|
| 8 |
+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
| 9 |
+
<script>hljs.initHighlightingOnLoad();</script>
|
| 10 |
+
<style>
|
| 11 |
+
.python-code-block {
|
| 12 |
+
border: 1px solid #ddd;
|
| 13 |
+
padding: 15px;
|
| 14 |
+
margin-left: 20px; /* Adjust this value for left alignment */
|
| 15 |
+
text-align: left; /* Ensures text within the block is left-aligned */
|
| 16 |
+
font-family: monospace;
|
| 17 |
+
white-space: pre-wrap; /* Preserves whitespace and wraps long lines */
|
| 18 |
+
}
|
| 19 |
+
</style>
|
| 20 |
</head>
|
| 21 |
<body>
|
| 22 |
<header class="flex items-center justify-between bg-white p-4 sm:p-6 rounded-lg shadow-md mb-8 flex-wrap">
|
|
|
|
| 50 |
<div class="container" style="margin-top:20px;">
|
| 51 |
<center>
|
| 52 |
<div class="jumbotron">
|
| 53 |
+
<h2>Download the annotations as jsonl file</h2>
|
| 54 |
<h3>The annotations are in Pascal VOC format</h3>
|
| 55 |
<button id="downloadButton" style="margin-top:10px;" class="btn btn-success">Download</button>
|
| 56 |
<div id="messageBox" class="mt-8 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg hidden" role="alert">
|
| 57 |
<p id="messageText" class="font-medium"></p>
|
| 58 |
+
</div>
|
| 59 |
+
<h5>You can use <code>datasets</code> package of huggingface to load the downloaded dataset. See demo code below.</h5>
|
| 60 |
+
<div class="python-code-block">
|
| 61 |
+
<pre><code class="language-python">
|
| 62 |
+
from datasets import load_dataset
|
| 63 |
+
your_data = load_dataset('imagefolder', data_dir='annotated_data') # this will use metadata.jsonl in annotated_data to create your_data
|
| 64 |
+
print(your_data)
|
| 65 |
+
# optional: you can easily plot one instance of your_data in jupyter notebook
|
| 66 |
+
import torch
|
| 67 |
+
from torchvision.utils import draw_bounding_boxes
|
| 68 |
+
from torchvision.transforms.functional import pil_to_tensor, to_pil_image
|
| 69 |
+
|
| 70 |
+
example = your_data['train'][0]
|
| 71 |
+
boxes_xyxy = torch.tensor(example['objects']['bbox'])
|
| 72 |
+
labels = [x for x in example['objects']['names']]
|
| 73 |
+
to_pil_image(
|
| 74 |
+
draw_bounding_boxes(
|
| 75 |
+
pil_to_tensor(example['image'].convert('RGB')),
|
| 76 |
+
boxes_xyxy,
|
| 77 |
+
colors="red",
|
| 78 |
+
labels=labels,
|
| 79 |
+
)
|
| 80 |
+
)
|
| 81 |
+
</code></pre>
|
| 82 |
</div>
|
| 83 |
<script>
|
| 84 |
document.getElementById('downloadButton').addEventListener('click', function() {
|