-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path05_text_data.js
62 lines (55 loc) · 1.75 KB
/
05_text_data.js
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
/* This example shows how to draw text data. */
import React from 'react';
import ReactDOM from 'react-dom';
import {VGrid, Table, Database, IntervalSet, Interval, Bounds, BoundingBox, SpatialType_Caption} from '@wcrichto/vgrid';
import '@wcrichto/vgrid/dist/vgrid.css';
// Setup intervals
let interval_blocks = [{
video_id: 0,
interval_sets: [{
name: 'test',
interval_set: new IntervalSet([new Interval(
new Bounds(0, 10),
{
spatial_type: new SpatialType_Caption('this is caption text'),
metadata: {}
}
), new Interval(
new Bounds(10, 20),
{
spatial_type: new SpatialType_Caption('this is more caption text'),
metadata: {}
}
), new Interval(
new Bounds(20, 30),
{
spatial_type: new SpatialType_Caption(
'>> this caption text will appear on a new line'
),
metadata: {}
}
)])
}]
}];
// Associate video IDs with metadata.
// This example assumes a 1920x1080 video at 59.94 FPS, with 20,696 frames.
// You should modify it for your own examples.
let database = new Database(
[new Table(
'videos',
[{id: 0, path: 'test.mp4', num_frames: 20696,
width: 1920, height: 1080, fps: 59.94}])]);
// Global component settings
let settings = {
video_endpoint: 'http://localhost:8000',
caption_delimiter: '>>' // control when new lines appear, this is default
};
// Run code when user provides labeling input
let label_callback = (label_state) => {
console.log(label_state.blocks_selected);
};
// Render React component into a <div id="#vgrid"></div>
ReactDOM.render(
<VGrid interval_blocks={interval_blocks} database={database}
settings={settings} label_callback={label_callback} />,
document.getElementById('vgrid'));