React UI: ReID algorithm (#1406)
* Initial commit * Connected storage * Added core API method * Done implementation * Removed rule * Removed double cancel * Updated changelog * Fixed: Cannot read property toFixed of undefined * Update CHANGELOG.mdmain
Boris Sekachev
6 years ago
committed by
GitHub
parent
deac1b0bb6
commit
f1aee89589
@ -0,0 +1,227 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import ReactDOM from 'react-dom';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import Menu from 'antd/lib/menu';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import InputNumber from 'antd/lib/input-number';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import { clamp } from 'utils/math';
|
||||
import { run, cancel } from 'utils/reid-utils';
|
||||
import { connect } from 'react-redux';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { fetchAnnotationsAsync } from 'actions/annotation-actions';
|
||||
|
||||
interface InputModalProps {
|
||||
visible: boolean;
|
||||
onCancel(): void;
|
||||
onSubmit(threshold: number, distance: number): void;
|
||||
}
|
||||
|
||||
function InputModal(props: InputModalProps): JSX.Element {
|
||||
const { visible, onCancel, onSubmit } = props;
|
||||
const [threshold, setThreshold] = useState(0.5);
|
||||
const [distance, setDistance] = useState(50);
|
||||
|
||||
const [thresholdMin, thresholdMax] = [0.05, 0.95];
|
||||
const [distanceMin, distanceMax] = [1, 1000];
|
||||
return (
|
||||
<Modal
|
||||
closable={false}
|
||||
width={300}
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={() => onSubmit(threshold, distance)}
|
||||
okText='Merge'
|
||||
>
|
||||
<Row type='flex'>
|
||||
<Col span={10}>
|
||||
<Tooltip title='Similarity of objects on neighbour frames is calculated using AI model'>
|
||||
<Text>Similarity threshold: </Text>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
min={thresholdMin}
|
||||
max={thresholdMax}
|
||||
step={0.05}
|
||||
value={threshold}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof (value) === 'number') {
|
||||
setThreshold(clamp(value, thresholdMin, thresholdMax));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex'>
|
||||
<Col span={10}>
|
||||
<Tooltip title='The value defines max distance to merge (between centers of two objects on neighbour frames)'>
|
||||
<Text>Max pixel distance: </Text>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
style={{ width: '100%' }}
|
||||
min={distanceMin}
|
||||
max={distanceMax}
|
||||
step={5}
|
||||
value={distance}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof (value) === 'number') {
|
||||
setDistance(clamp(value, distanceMin, distanceMax));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
interface InProgressDialogProps {
|
||||
visible: boolean;
|
||||
progress: number;
|
||||
onCancel(): void;
|
||||
}
|
||||
|
||||
function InProgressDialog(props: InProgressDialogProps): JSX.Element {
|
||||
const { visible, onCancel, progress } = props;
|
||||
return (
|
||||
<Modal
|
||||
closable={false}
|
||||
width={300}
|
||||
visible={visible}
|
||||
okText='Cancel'
|
||||
okButtonProps={{
|
||||
type: 'danger',
|
||||
}}
|
||||
onOk={onCancel}
|
||||
cancelButtonProps={{
|
||||
style: {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text>{`Merging is in progress ${progress}%`}</Text>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const reidContainer = window.document.createElement('div');
|
||||
reidContainer.setAttribute('id', 'cvat-reid-wrapper');
|
||||
window.document.body.appendChild(reidContainer);
|
||||
|
||||
|
||||
interface StateToProps {
|
||||
jobInstance: any | null;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
updateAnnotations(): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
job: {
|
||||
instance: jobInstance,
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
jobInstance,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||
return {
|
||||
updateAnnotations(): void {
|
||||
dispatch(fetchAnnotationsAsync());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function ReIDPlugin(props: StateToProps & DispatchToProps): JSX.Element {
|
||||
const { jobInstance, updateAnnotations, ...rest } = props;
|
||||
const [showInputDialog, setShowInputDialog] = useState(false);
|
||||
const [showInProgressDialog, setShowInProgressDialog] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
ReactDOM.render((
|
||||
<>
|
||||
<InProgressDialog
|
||||
visible={showInProgressDialog}
|
||||
progress={progress}
|
||||
onCancel={() => {
|
||||
cancel(jobInstance.id);
|
||||
}}
|
||||
/>
|
||||
<InputModal
|
||||
visible={showInputDialog}
|
||||
onCancel={() => setShowInputDialog(false)}
|
||||
onSubmit={async (threshold: number, distance: number) => {
|
||||
setProgress(0);
|
||||
setShowInputDialog(false);
|
||||
setShowInProgressDialog(true);
|
||||
|
||||
const onUpdatePercentage = (percent: number): void => {
|
||||
setProgress(percent);
|
||||
};
|
||||
|
||||
try {
|
||||
const annotations = await jobInstance.annotations.export();
|
||||
const merged = await run({
|
||||
threshold,
|
||||
distance,
|
||||
onUpdatePercentage,
|
||||
jobID: jobInstance.id,
|
||||
annotations,
|
||||
});
|
||||
await jobInstance.annotations.clear();
|
||||
updateAnnotations(); // one more call to do not confuse canvas
|
||||
await jobInstance.annotations.import(merged);
|
||||
updateAnnotations();
|
||||
} catch (error) {
|
||||
Modal.error({
|
||||
title: 'Could not merge annotations',
|
||||
content: error.toString(),
|
||||
});
|
||||
} finally {
|
||||
setShowInProgressDialog(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
), reidContainer);
|
||||
});
|
||||
|
||||
return (
|
||||
<Menu.Item
|
||||
{...rest}
|
||||
key='run_reid'
|
||||
title='Run algorithm that merges separated bounding boxes automatically'
|
||||
onClick={() => {
|
||||
if (jobInstance) {
|
||||
setShowInputDialog(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Run ReID merge
|
||||
</Menu.Item>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ReIDPlugin);
|
||||
@ -0,0 +1,96 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import getCore from 'cvat-core';
|
||||
import { ShapeType, RQStatus } from 'reducers/interfaces';
|
||||
|
||||
|
||||
const core = getCore();
|
||||
const baseURL = core.config.backendAPI.slice(0, -7);
|
||||
|
||||
type Params = {
|
||||
threshold: number;
|
||||
distance: number;
|
||||
onUpdatePercentage(percentage: number): void;
|
||||
jobID: number;
|
||||
annotations: any;
|
||||
};
|
||||
|
||||
export function run(params: Params): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const {
|
||||
threshold,
|
||||
distance,
|
||||
onUpdatePercentage,
|
||||
jobID,
|
||||
annotations,
|
||||
} = params;
|
||||
const { shapes, ...rest } = annotations;
|
||||
|
||||
const boxes = shapes.filter((shape: any): boolean => shape.type === ShapeType.RECTANGLE);
|
||||
const others = shapes.filter((shape: any): boolean => shape.type !== ShapeType.RECTANGLE);
|
||||
|
||||
core.server.request(
|
||||
`${baseURL}/reid/start/job/${params.jobID}`, {
|
||||
method: 'POST',
|
||||
data: JSON.stringify({
|
||||
threshold,
|
||||
maxDistance: distance,
|
||||
boxes,
|
||||
}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
},
|
||||
).then(() => {
|
||||
const timeoutCallback = (): void => {
|
||||
core.server.request(
|
||||
`${baseURL}/reid/check/${jobID}`, {
|
||||
method: 'GET',
|
||||
},
|
||||
).then((response: any) => {
|
||||
const { status } = response;
|
||||
if (status === RQStatus.finished) {
|
||||
if (!response.result) {
|
||||
// cancelled
|
||||
resolve(annotations);
|
||||
}
|
||||
|
||||
const result = JSON.parse(response.result);
|
||||
const collection = rest;
|
||||
Array.prototype.push.apply(collection.tracks, result);
|
||||
collection.shapes = others;
|
||||
resolve(collection);
|
||||
} else if (status === RQStatus.started) {
|
||||
const { progress } = response;
|
||||
if (typeof (progress) === 'number') {
|
||||
onUpdatePercentage(+progress.toFixed(2));
|
||||
}
|
||||
setTimeout(timeoutCallback, 1000);
|
||||
} else if (status === RQStatus.failed) {
|
||||
reject(new Error(response.stderr));
|
||||
} else if (status === RQStatus.unknown) {
|
||||
reject(new Error('Unknown REID status has been received'));
|
||||
} else {
|
||||
setTimeout(timeoutCallback, 1000);
|
||||
}
|
||||
}).catch((error: Error) => {
|
||||
reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
setTimeout(timeoutCallback, 1000);
|
||||
}).catch((error: Error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function cancel(jobID: number): void {
|
||||
core.server.request(
|
||||
`${baseURL}/reid/cancel/${jobID}`, {
|
||||
method: 'GET',
|
||||
},
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue