Skip to content

Commit b895dee

Browse files
TrevorBurgoyneTrevorBurgoyne
authored
Merge pull request #246 from SenteraLLC/fix/demo
fix/demo
2 parents 1dcbafd + 97565c7 commit b895dee

4 files changed

Lines changed: 158 additions & 2 deletions

File tree

‎.github/workflows/deploy-demo.yml‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
name: Deploy Demo to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
# Least-privilege permissions
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
# Allow only one concurrent deployment, skipping runs queued between the run
16+
# in-progress and latest queued. Do not cancel in-progress runs.
17+
concurrency:
18+
group: pages
19+
cancel-in-progress: false
20+
21+
jobs:
22+
build:
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout code
26+
uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
27+
28+
- name: Setup Node.js
29+
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
30+
with:
31+
node-version: '20'
32+
cache: 'npm'
33+
34+
- name: Install dependencies
35+
run: npm ci
36+
37+
- name: Build
38+
run: npm run build
39+
40+
- name: Assemble site
41+
run: |
42+
mkdir -p _site
43+
cp demo/live_demo.html _site/index.html
44+
cp dist/ulabel.min.js _site/ulabel.min.js
45+
46+
- name: Configure Pages
47+
uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5
48+
49+
- name: Upload Pages artifact
50+
uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
51+
with:
52+
path: _site
53+
54+
deploy:
55+
needs: build
56+
runs-on: ubuntu-latest
57+
environment:
58+
name: github-pages
59+
url: ${{ steps.deployment.outputs.page_url }}
60+
steps:
61+
- name: Deploy to GitHub Pages
62+
id: deployment
63+
uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ A browser-based tool for annotating images.
44

55
[Demo Gif](https://ulabel.s3.us-east-2.amazonaws.com/output.gif)
66

7-
[Interactive Demo](https://ulabel.s3.us-east-2.amazonaws.com/live_demo.html)
7+
[Interactive Demo](https://senterallc.github.io/ulabel/)
88

99
## Usage
1010

‎demo.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@ console.log(`http://localhost:${port}/multi-class.html`);
1212
console.log(`http://localhost:${port}/frames.html`);
1313
console.log(`http://localhost:${port}/box-roi.html`);
1414
console.log(`http://localhost:${port}/resume-from.html`);
15-
console.log(`http://localhost:${port}/row-filtering-example.html`);
15+
console.log(`http://localhost:${port}/row-filtering-example.html`);
16+
console.log(`http://localhost:${port}/live_demo.html`);

‎demo/live_demo.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ULabel Interactive Demo</title>
5+
6+
<!-- ULabel Library (minified build, served alongside this page) -->
7+
<script src="./ulabel.min.js"></script>
8+
9+
<!-- JQuery Library -->
10+
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
11+
12+
<!-- ULabel Usage -->
13+
<script>
14+
/* global $ */
15+
/* global ULabel */
16+
17+
$(window).on("load", function() {
18+
19+
let resume_from = [
20+
{
21+
"id": "a1035bf8-324d-44c9-9119-7c0c1888d3ba",
22+
"spatial_type": "bbox",
23+
"spatial_payload": [[871.84, 480.78], [833.71, 396.29]],
24+
"classification_payloads": [
25+
{"class_id": 11, "confidence": 1.0},
26+
],
27+
},
28+
{
29+
"id": "dec78d65-9cb4-43ec-8c5a-dcbbae7a3d74",
30+
"spatial_type": "bbox",
31+
"spatial_payload": [[1257.66, 541.35], [1079.71, 411.99]],
32+
"classification_payloads": [
33+
{"class_id": 10, "confidence": 1.0},
34+
],
35+
},
36+
];
37+
38+
function on_submit(annotations) {
39+
var element = document.createElement('a');
40+
element.setAttribute(
41+
"href", ('data:text/plain;charset=utf-8,' +
42+
encodeURIComponent(JSON.stringify(annotations, null, 2)))
43+
);
44+
element.setAttribute("download", "annotations.json");
45+
element.style.display = 'none';
46+
document.body.appendChild(element);
47+
element.click();
48+
document.body.removeChild(element);
49+
}
50+
51+
let subtasks = {
52+
"car_detection": {
53+
"display_name": "Object Detection",
54+
"classes": [
55+
{
56+
"name": "Car",
57+
"color": "orange",
58+
"id": 10
59+
},
60+
{
61+
"name": "Pedestrian",
62+
"color": "cyan",
63+
"id": 11
64+
}
65+
],
66+
"allowed_modes": ["point", "bbox", "polygon", "contour", "polyline", "tbar", "delete_bbox", "delete_polygon"],
67+
"resume_from": resume_from,
68+
"task_meta": null,
69+
"annotation_meta": null
70+
}
71+
};
72+
73+
// Initial ULabel configuration
74+
let ulabel = new ULabel({
75+
"container_id": "container",
76+
"image_data": "https://ulabel.s3.us-east-2.amazonaws.com/cs-demo-0.png",
77+
"username": "DemoUser",
78+
"submit_buttons": on_submit,
79+
"subtasks": subtasks
80+
});
81+
// Wait for ULabel instance to finish initialization
82+
ulabel.init(function() {
83+
// ULabel is now ready for use
84+
});
85+
86+
});
87+
</script>
88+
</head>
89+
<body>
90+
<div id="container" style="width: 100%; height: 100vh; position: absolute; top: 0; left: 0;"></div>
91+
</body>
92+
</html>

0 commit comments

Comments
 (0)