Skip to content

fix/demo #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TrevorBurgoyne merged 1 commit into from
Jul 17, 2026
Merged

fix/demo #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions .github/workflows/deploy-demo.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
name: Deploy Demo to GitHub Pages

on:
push:
branches:
- main
workflow_dispatch:

# Least-privilege permissions
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run
# in-progress and latest queued. Do not cancel in-progress runs.
concurrency:
group: pages
cancel-in-progress: false

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4

- name: Setup Node.js
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: '20'
cache: 'npm'

- name: Install dependencies
run: npm ci

- name: Build
run: npm run build

- name: Assemble site
run: |
mkdir -p _site
cp demo/live_demo.html _site/index.html
cp dist/ulabel.min.js _site/ulabel.min.js

- name: Configure Pages
uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5

- name: Upload Pages artifact
uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
with:
path: _site

deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A browser-based tool for annotating images.

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

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

## Usage

Expand Down
3 changes: 2 additions & 1 deletion demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ console.log(`http://localhost:${port}/multi-class.html`);
console.log(`http://localhost:${port}/frames.html`);
console.log(`http://localhost:${port}/box-roi.html`);
console.log(`http://localhost:${port}/resume-from.html`);
console.log(`http://localhost:${port}/row-filtering-example.html`);
console.log(`http://localhost:${port}/row-filtering-example.html`);
console.log(`http://localhost:${port}/live_demo.html`);
92 changes: 92 additions & 0 deletions demo/live_demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>ULabel Interactive Demo</title>

<!-- ULabel Library (minified build, served alongside this page) -->
<script src="./ulabel.min.js"></script>

<!-- JQuery Library -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<!-- ULabel Usage -->
<script>
/* global $ */
/* global ULabel */

$(window).on("load", function() {

let resume_from = [
{
"id": "a1035bf8-324d-44c9-9119-7c0c1888d3ba",
"spatial_type": "bbox",
"spatial_payload": [[871.84, 480.78], [833.71, 396.29]],
"classification_payloads": [
{"class_id": 11, "confidence": 1.0},
],
},
{
"id": "dec78d65-9cb4-43ec-8c5a-dcbbae7a3d74",
"spatial_type": "bbox",
"spatial_payload": [[1257.66, 541.35], [1079.71, 411.99]],
"classification_payloads": [
{"class_id": 10, "confidence": 1.0},
],
},
];

function on_submit(annotations) {
var element = document.createElement('a');
element.setAttribute(
"href", ('data:text/plain;charset=utf-8,' +
encodeURIComponent(JSON.stringify(annotations, null, 2)))
);
element.setAttribute("download", "annotations.json");
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}

let subtasks = {
"car_detection": {
"display_name": "Object Detection",
"classes": [
{
"name": "Car",
"color": "orange",
"id": 10
},
{
"name": "Pedestrian",
"color": "cyan",
"id": 11
}
],
"allowed_modes": ["point", "bbox", "polygon", "contour", "polyline", "tbar", "delete_bbox", "delete_polygon"],
"resume_from": resume_from,
"task_meta": null,
"annotation_meta": null
}
};

// Initial ULabel configuration
let ulabel = new ULabel({
"container_id": "container",
"image_data": "https://ulabel.s3.us-east-2.amazonaws.com/cs-demo-0.png",
"username": "DemoUser",
"submit_buttons": on_submit,
"subtasks": subtasks
});
// Wait for ULabel instance to finish initialization
ulabel.init(function() {
// ULabel is now ready for use
});

});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 100vh; position: absolute; top: 0; left: 0;"></div>
</body>
</html>
Loading