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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import React, { Component } from 'react'
import { courtesyS } from '../util'
import { TableTuples, DetectionList, Keyframe } from '.'
export default class Classifier extends Component {
render() {
const {
tag,
sha256,
verified,
keyframes = {},
labels,
summary,
aspectRatio = 1.777,
showAll,
} = this.props
let totalDetections = 0
const keys = Object
.keys(keyframes)
.map(s => parseInt(s, 10))
const validKeyframes = keys
.sort((a, b) => a - b)
.map(frame => {
const detections = keyframes[frame]
if (detections.length || showAll) {
totalDetections += detections.length
return { frame, detections }
}
return null
})
.filter(f => !!f)
const detectionLookup = validKeyframes
.reduce((a, b) => {
b.detections.reduce((aa, { idx }) => {
if (!(idx in aa)) aa[idx] = [labels[idx], 0]
aa[idx][1] += 1
return aa
}, a)
return a
}, {})
const detectionCounts = Object.keys(detectionLookup)
.map(idx => detectionLookup[idx])
.sort((a, b) => b[1] - a[1])
if (summary) {
return (
<div>
<h3>{tag}{' Detections'}</h3>
<TableTuples
list={detectionCounts}
/>
</div>
)
}
return (
<div>
<h2>{tag}</h2>
<h3>Detections</h3>
<TableTuples
list={detectionCounts}
/>
<h3>Frames</h3>
<ul className='meta'>
<li>
{'Displaying '}{validKeyframes.length}{' / '}{courtesyS(keys.length, 'frame')}
</li>
<li>
{courtesyS(totalDetections, 'detection')}{' found'}
</li>
</ul>
<div className='thumbnails'>
{validKeyframes.map(({ frame, detections }) => (
<Keyframe
key={frame}
sha256={sha256}
frame={frame}
verified={verified}
size='th'
showFrame
showTimestamp
aspectRatio={aspectRatio}
detectionList={[
{ labels, detections }
]}
>
<DetectionList
labels={labels}
detections={detections}
width={160}
height={90}
/>
</Keyframe>
))}
</div>
</div>
)
}
}
|
