Running detectors on the fly (#2102)
* Draft version * Removed extra file * Removed extra code * Updated icon: magic wand * Ctrl modifier, fixed some cases when interaction event isn't raised * Added tooltip description of an interactor * Locking UI while server fetching * Removing old code & refactoring * Fixed couple of bugs * Updated CHANGELOG.md, updated versions * Update crosshair.ts * Minor fixes * Fixed eslint issues * Prevent default action * Added minNegVertices=0 by default, ignored negative points for dextr, fixed context menu in some cases * On the fly annotations draft * Initial version of FBRS interactive segmentation * Fix fbrs model_handler * Fixed couple of minor bugs * Added ability to interrupt interaction * Do not show reid on annotation view * Prettified UI * Updated changelog, increased version * Removed extra files * Removed extra code * Fixed changelog Co-authored-by: Nikita Manovich <nikita.manovich@intel.com>main
Boris Sekachev
6 years ago
committed by
GitHub
parent
ffb71fb7a2
commit
bd143853a5
@ -0,0 +1,319 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useState } from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Select, { OptionProps } from 'antd/lib/select';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
import Tag from 'antd/lib/tag';
|
||||
import notification from 'antd/lib/notification';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import InputNumber from 'antd/lib/input-number';
|
||||
|
||||
import { Model, StringObject } from 'reducers/interfaces';
|
||||
import Button from 'antd/lib/button';
|
||||
|
||||
|
||||
function colorGenerator(): () => string {
|
||||
const values = [
|
||||
'magenta', 'green', 'geekblue',
|
||||
'orange', 'red', 'cyan',
|
||||
'blue', 'volcano', 'purple',
|
||||
];
|
||||
|
||||
let index = 0;
|
||||
|
||||
return (): string => {
|
||||
const color = values[index++];
|
||||
if (index >= values.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
return color;
|
||||
};
|
||||
}
|
||||
|
||||
const nextColor = colorGenerator();
|
||||
|
||||
interface Props {
|
||||
withCleanup: boolean;
|
||||
models: Model[];
|
||||
task: any;
|
||||
runInference(task: any, model: Model, body: object): void;
|
||||
}
|
||||
|
||||
function DetectorRunner(props: Props): JSX.Element {
|
||||
const {
|
||||
task,
|
||||
models,
|
||||
withCleanup,
|
||||
runInference,
|
||||
} = props;
|
||||
|
||||
const [modelID, setModelID] = useState<string | null>(null);
|
||||
const [mapping, setMapping] = useState<StringObject>({});
|
||||
const [colors, setColors] = useState<StringObject>({});
|
||||
const [threshold, setThreshold] = useState<number>(0.5);
|
||||
const [distance, setDistance] = useState<number>(50);
|
||||
const [cleanup, setCleanup] = useState<boolean>(false);
|
||||
const [match, setMatch] = useState<{
|
||||
model: string | null;
|
||||
task: string | null;
|
||||
}>({
|
||||
model: null,
|
||||
task: null,
|
||||
});
|
||||
|
||||
const model = models.filter((_model): boolean => _model.id === modelID)[0];
|
||||
const isDetector = model && model.type === 'detector';
|
||||
const isReId = model && model.type === 'reid';
|
||||
const buttonEnabled = model && (model.type === 'reid' || (
|
||||
model.type === 'detector' && !!Object.keys(mapping).length
|
||||
));
|
||||
|
||||
const modelLabels = (isDetector ? model.labels : [])
|
||||
.filter((_label: string): boolean => !(_label in mapping));
|
||||
const taskLabels = (isDetector && !!task
|
||||
? task.labels.map((label: any): string => label.name) : []
|
||||
);
|
||||
|
||||
if (model && model.type !== 'reid' && !model.labels.length) {
|
||||
notification.warning({
|
||||
message: 'The selected model does not include any lables',
|
||||
});
|
||||
}
|
||||
|
||||
function updateMatch(modelLabel: string | null, taskLabel: string | null): void {
|
||||
if (match.model && taskLabel) {
|
||||
const newmatch: { [index: string]: string } = {};
|
||||
const newcolor: { [index: string]: string } = {};
|
||||
newmatch[match.model] = taskLabel;
|
||||
newcolor[match.model] = nextColor();
|
||||
setColors({ ...colors, ...newcolor });
|
||||
setMapping({ ...mapping, ...newmatch });
|
||||
setMatch({ model: null, task: null });
|
||||
return;
|
||||
}
|
||||
|
||||
if (match.task && modelLabel) {
|
||||
const newmatch: { [index: string]: string } = {};
|
||||
const newcolor: { [index: string]: string } = {};
|
||||
newmatch[modelLabel] = match.task;
|
||||
newcolor[modelLabel] = nextColor();
|
||||
setColors({ ...colors, ...newcolor });
|
||||
setMapping({ ...mapping, ...newmatch });
|
||||
setMatch({ model: null, task: null });
|
||||
return;
|
||||
}
|
||||
|
||||
setMatch({
|
||||
model: modelLabel,
|
||||
task: taskLabel,
|
||||
});
|
||||
}
|
||||
|
||||
function renderSelector(
|
||||
value: string,
|
||||
tooltip: string,
|
||||
labels: string[],
|
||||
onChange: (label: string) => void,
|
||||
): JSX.Element {
|
||||
return (
|
||||
<Tooltip title={tooltip}>
|
||||
<Select
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
style={{ width: '100%' }}
|
||||
showSearch
|
||||
filterOption={(input: string, option: React.ReactElement<OptionProps>) => {
|
||||
const { children } = option.props;
|
||||
if (typeof (children) === 'string') {
|
||||
return children.toLowerCase().includes(input.toLowerCase());
|
||||
}
|
||||
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
{ labels.map((label: string): JSX.Element => (
|
||||
<Select.Option key={label}>{label}</Select.Option>
|
||||
)) }
|
||||
</Select>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='cvat-run-model-content'>
|
||||
<Row type='flex' align='middle'>
|
||||
<Col span={4}>Model:</Col>
|
||||
<Col span={20}>
|
||||
<Select
|
||||
placeholder='Select a model'
|
||||
style={{ width: '100%' }}
|
||||
onChange={(_modelID: string): void => {
|
||||
const newmodel = models
|
||||
.filter((_model): boolean => _model.id === _modelID)[0];
|
||||
const newcolors: StringObject = {};
|
||||
const newmapping = task.labels
|
||||
.reduce((acc: StringObject, label: any): StringObject => {
|
||||
if (newmodel.labels.includes(label.name)) {
|
||||
acc[label.name] = label.name;
|
||||
newcolors[label.name] = nextColor();
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
setMapping(newmapping);
|
||||
setColors(newcolors);
|
||||
setMatch({ model: null, task: null });
|
||||
setModelID(_modelID);
|
||||
}}
|
||||
>
|
||||
{models.map((_model: Model): JSX.Element => (
|
||||
<Select.Option key={_model.id}>{_model.name}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
{ isDetector && !!Object.keys(mapping).length && (
|
||||
Object.keys(mapping).map((modelLabel: string) => (
|
||||
<Row key={modelLabel} type='flex' justify='start' align='middle'>
|
||||
<Col span={10}>
|
||||
<Tag color={colors[modelLabel]}>{modelLabel}</Tag>
|
||||
</Col>
|
||||
<Col span={10} offset={1}>
|
||||
<Tag color={colors[modelLabel]}>{mapping[modelLabel]}</Tag>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Tooltip title='Remove the mapped values' mouseLeaveDelay={0}>
|
||||
<Icon
|
||||
className='cvat-danger-circle-icon'
|
||||
type='close-circle'
|
||||
onClick={(): void => {
|
||||
const newmapping = { ...mapping };
|
||||
delete newmapping[modelLabel];
|
||||
setMapping(newmapping);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
))
|
||||
)}
|
||||
{ isDetector && !!taskLabels.length && !!modelLabels.length && (
|
||||
<>
|
||||
<Row type='flex' justify='start' align='middle'>
|
||||
<Col span={10}>
|
||||
{renderSelector(
|
||||
match.model || '',
|
||||
'Model labels',
|
||||
modelLabels,
|
||||
(modelLabel: string) => updateMatch(modelLabel, null),
|
||||
)}
|
||||
</Col>
|
||||
<Col span={10} offset={1}>
|
||||
{renderSelector(
|
||||
match.task || '',
|
||||
'Task labels',
|
||||
taskLabels,
|
||||
(taskLabel: string) => updateMatch(null, taskLabel),
|
||||
)}
|
||||
</Col>
|
||||
<Col span={1} offset={1}>
|
||||
<Tooltip title='Specify a label mapping between model labels and task labels' mouseLeaveDelay={0}>
|
||||
<Icon className='cvat-info-circle-icon' type='question-circle' />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
{ isDetector && withCleanup && (
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={cleanup}
|
||||
onChange={(e: CheckboxChangeEvent): void => setCleanup(e.target.checked)}
|
||||
>
|
||||
Clean old annotations
|
||||
</Checkbox>
|
||||
</div>
|
||||
)}
|
||||
{ isReId && (
|
||||
<div>
|
||||
<Row type='flex' align='middle' justify='start'>
|
||||
<Col>
|
||||
<Text>Threshold</Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Tooltip title='Minimum similarity value for shapes that can be merged'>
|
||||
<InputNumber
|
||||
min={0.01}
|
||||
step={0.01}
|
||||
max={1}
|
||||
value={threshold}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof (value) === 'number') {
|
||||
setThreshold(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' align='middle' justify='start'>
|
||||
<Col>
|
||||
<Text>Maximum distance</Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Tooltip title='Maximum distance between shapes that can be merged'>
|
||||
<InputNumber
|
||||
placeholder='Threshold'
|
||||
min={1}
|
||||
value={distance}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof (value) === 'number') {
|
||||
setDistance(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
) }
|
||||
<Row type='flex' align='middle' justify='end'>
|
||||
<Col>
|
||||
<Button
|
||||
disabled={!buttonEnabled}
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
runInference(
|
||||
task,
|
||||
model,
|
||||
model.type === 'detector' ? { mapping, cleanup } : {
|
||||
threshold,
|
||||
max_distance: distance,
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
Annotate
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default React.memo(DetectorRunner, (prevProps: Props, nextProps: Props): boolean => (
|
||||
prevProps.task === nextProps.task
|
||||
&& prevProps.runInference === nextProps.runInference
|
||||
&& prevProps.models.length === nextProps.models.length
|
||||
&& nextProps.models.reduce((acc: boolean, model: Model, index: number): boolean => (
|
||||
acc && model.id === prevProps.models[index].id
|
||||
), true)
|
||||
));
|
||||
@ -0,0 +1,88 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Modal from 'antd/lib/modal';
|
||||
|
||||
import { ThunkDispatch } from 'utils/redux';
|
||||
import { modelsActions, startInferenceAsync } from 'actions/models-actions';
|
||||
import { Model, CombinedState } from 'reducers/interfaces';
|
||||
import DetectorRunner from './detector-runner';
|
||||
|
||||
|
||||
interface StateToProps {
|
||||
visible: boolean;
|
||||
task: any;
|
||||
detectors: Model[];
|
||||
reid: Model[];
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
runInference(task: any, model: Model, body: object): void;
|
||||
closeDialog(): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const { models } = state;
|
||||
const { detectors, reid } = models;
|
||||
|
||||
return {
|
||||
visible: models.visibleRunWindows,
|
||||
task: models.activeRunTask,
|
||||
reid,
|
||||
detectors,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: ThunkDispatch): DispatchToProps {
|
||||
return {
|
||||
runInference(task: any, model: Model, body: object) {
|
||||
dispatch(startInferenceAsync(task, model, body));
|
||||
},
|
||||
closeDialog() {
|
||||
dispatch(modelsActions.closeRunModelDialog());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function ModelRunnerDialog(props: StateToProps & DispatchToProps): JSX.Element {
|
||||
const {
|
||||
reid,
|
||||
detectors,
|
||||
task,
|
||||
visible,
|
||||
runInference,
|
||||
closeDialog,
|
||||
} = props;
|
||||
|
||||
const models = [...reid, ...detectors];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
visible={visible}
|
||||
footer={[]}
|
||||
onCancel={(): void => closeDialog()}
|
||||
maskClosable
|
||||
title='Automatic annotation'
|
||||
>
|
||||
<DetectorRunner
|
||||
withCleanup
|
||||
models={models}
|
||||
task={task}
|
||||
runInference={(...args) => {
|
||||
closeDialog();
|
||||
runInference(...args);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ModelRunnerDialog);
|
||||
@ -1,450 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Select from 'antd/lib/select';
|
||||
import Checkbox from 'antd/lib/checkbox';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import Tag from 'antd/lib/tag';
|
||||
import notification from 'antd/lib/notification';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import InputNumber from 'antd/lib/input-number';
|
||||
|
||||
import {
|
||||
Model,
|
||||
StringObject,
|
||||
} from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
reid: Model[];
|
||||
detectors: Model[];
|
||||
activeProcesses: StringObject;
|
||||
visible: boolean;
|
||||
taskInstance: any;
|
||||
closeDialog(): void;
|
||||
runInference(
|
||||
taskInstance: any,
|
||||
model: Model,
|
||||
body: object,
|
||||
): void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
selectedModel: string | null;
|
||||
cleanup: boolean;
|
||||
mapping: StringObject;
|
||||
colors: StringObject;
|
||||
matching: {
|
||||
model: string;
|
||||
task: string;
|
||||
};
|
||||
|
||||
threshold: number;
|
||||
maxDistance: number;
|
||||
}
|
||||
|
||||
function colorGenerator(): () => string {
|
||||
const values = [
|
||||
'magenta', 'green', 'geekblue',
|
||||
'orange', 'red', 'cyan',
|
||||
'blue', 'volcano', 'purple',
|
||||
];
|
||||
|
||||
let index = 0;
|
||||
|
||||
return (): string => {
|
||||
const color = values[index++];
|
||||
if (index >= values.length) {
|
||||
index = 0;
|
||||
}
|
||||
|
||||
return color;
|
||||
};
|
||||
}
|
||||
|
||||
const nextColor = colorGenerator();
|
||||
|
||||
export default class ModelRunnerModalComponent extends React.PureComponent<Props, State> {
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedModel: null,
|
||||
mapping: {},
|
||||
colors: {},
|
||||
cleanup: false,
|
||||
matching: {
|
||||
model: '',
|
||||
task: '',
|
||||
},
|
||||
|
||||
threshold: 0.5,
|
||||
maxDistance: 50,
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
const {
|
||||
reid,
|
||||
detectors,
|
||||
taskInstance,
|
||||
visible,
|
||||
} = this.props;
|
||||
|
||||
const { selectedModel } = this.state;
|
||||
const models = [...reid, ...detectors];
|
||||
|
||||
if (!prevProps.visible && visible) {
|
||||
this.setState({
|
||||
selectedModel: null,
|
||||
mapping: {},
|
||||
matching: {
|
||||
model: '',
|
||||
task: '',
|
||||
},
|
||||
cleanup: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (selectedModel && prevState.selectedModel !== selectedModel) {
|
||||
const selectedModelInstance = models
|
||||
.filter((model) => model.name === selectedModel)[0];
|
||||
|
||||
if (selectedModelInstance.type !== 'reid' && !selectedModelInstance.labels.length) {
|
||||
notification.warning({
|
||||
message: 'The selected model does not include any lables',
|
||||
});
|
||||
}
|
||||
|
||||
let taskLabels: string[] = taskInstance.labels
|
||||
.map((label: any): string => label.name);
|
||||
const [defaultMapping, defaultColors]: StringObject[] = selectedModelInstance.labels
|
||||
.reduce((acc: StringObject[], label): StringObject[] => {
|
||||
if (taskLabels.includes(label)) {
|
||||
acc[0][label] = label;
|
||||
acc[1][label] = nextColor();
|
||||
taskLabels = taskLabels.filter((_label): boolean => _label !== label);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, [{}, {}]);
|
||||
|
||||
this.setState({
|
||||
mapping: defaultMapping,
|
||||
colors: defaultColors,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private renderModelSelector(): JSX.Element {
|
||||
const { reid, detectors } = this.props;
|
||||
const models = [...reid, ...detectors];
|
||||
|
||||
return (
|
||||
<Row type='flex' align='middle'>
|
||||
<Col span={4}>Model:</Col>
|
||||
<Col span={19}>
|
||||
<Select
|
||||
placeholder='Select a model'
|
||||
style={{ width: '100%' }}
|
||||
onChange={(value: string): void => this.setState({
|
||||
selectedModel: value,
|
||||
mapping: {},
|
||||
})}
|
||||
>
|
||||
{models.map((model): JSX.Element => (
|
||||
<Select.Option key={model.name}>
|
||||
{model.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
private renderMappingTag(modelLabel: string, taskLabel: string): JSX.Element {
|
||||
const { colors, mapping } = this.state;
|
||||
|
||||
return (
|
||||
<Row key={`${modelLabel}-${taskLabel}`} type='flex' justify='start' align='middle'>
|
||||
<Col span={10}>
|
||||
<Tag color={colors[modelLabel]}>{modelLabel}</Tag>
|
||||
</Col>
|
||||
<Col span={10} offset={1}>
|
||||
<Tag color={colors[modelLabel]}>{taskLabel}</Tag>
|
||||
</Col>
|
||||
<Col span={1} offset={1}>
|
||||
<Tooltip title='Remove the mapped values' mouseLeaveDelay={0}>
|
||||
<Icon
|
||||
className='cvat-run-model-dialog-remove-mapping-icon'
|
||||
type='close-circle'
|
||||
onClick={(): void => {
|
||||
const newMapping = { ...mapping };
|
||||
delete newMapping[modelLabel];
|
||||
this.setState({
|
||||
mapping: newMapping,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
private renderMappingInputSelector(
|
||||
value: string,
|
||||
current: string,
|
||||
options: string[],
|
||||
): JSX.Element {
|
||||
const { matching, mapping, colors } = this.state;
|
||||
|
||||
return (
|
||||
<Select
|
||||
value={value}
|
||||
placeholder={`${current} labels`}
|
||||
style={{ width: '100%' }}
|
||||
onChange={(selectedValue: string): void => {
|
||||
const anotherValue = current === 'Model'
|
||||
? matching.task : matching.model;
|
||||
|
||||
if (!anotherValue) {
|
||||
const newMatching = { ...matching };
|
||||
if (current === 'Model') {
|
||||
newMatching.model = selectedValue;
|
||||
} else {
|
||||
newMatching.task = selectedValue;
|
||||
}
|
||||
this.setState({
|
||||
matching: newMatching,
|
||||
});
|
||||
} else {
|
||||
const newColors = { ...colors };
|
||||
const newMapping = { ...mapping };
|
||||
|
||||
if (current === 'Model') {
|
||||
newColors[selectedValue] = nextColor();
|
||||
newMapping[selectedValue] = anotherValue;
|
||||
} else {
|
||||
newColors[anotherValue] = nextColor();
|
||||
newMapping[anotherValue] = selectedValue;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
colors: newColors,
|
||||
mapping: newMapping,
|
||||
matching: {
|
||||
task: '',
|
||||
model: '',
|
||||
},
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{options.map((label: string): JSX.Element => (
|
||||
<Select.Option key={label}>
|
||||
{label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
private renderMappingInput(
|
||||
availableModelLabels: string[],
|
||||
availableTaskLabels: string[],
|
||||
): JSX.Element {
|
||||
const { matching } = this.state;
|
||||
return (
|
||||
<Row type='flex' justify='start' align='middle'>
|
||||
<Col span={10}>
|
||||
{this.renderMappingInputSelector(
|
||||
matching.model,
|
||||
'Model',
|
||||
availableModelLabels,
|
||||
)}
|
||||
</Col>
|
||||
<Col span={10} offset={1}>
|
||||
{this.renderMappingInputSelector(
|
||||
matching.task,
|
||||
'Task',
|
||||
availableTaskLabels,
|
||||
)}
|
||||
</Col>
|
||||
<Col span={1} offset={1}>
|
||||
<Tooltip title='Specify a label mapping between model labels and task labels' mouseLeaveDelay={0}>
|
||||
<Icon className='cvat-info-circle-icon' type='question-circle' />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
private renderReidContent(): JSX.Element {
|
||||
const { threshold, maxDistance } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row type='flex' align='middle' justify='start'>
|
||||
<Col>
|
||||
<Text>Threshold</Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Tooltip title='Minimum similarity value for shapes that can be merged'>
|
||||
<InputNumber
|
||||
min={0.01}
|
||||
step={0.01}
|
||||
max={1}
|
||||
value={threshold}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof (value) === 'number') {
|
||||
this.setState({
|
||||
threshold: value,
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' align='middle' justify='start'>
|
||||
<Col>
|
||||
<Text>Maximum distance</Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Tooltip title='Maximum distance between shapes that can be merged'>
|
||||
<InputNumber
|
||||
placeholder='Threshold'
|
||||
min={1}
|
||||
value={maxDistance}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof (value) === 'number') {
|
||||
this.setState({
|
||||
maxDistance: value,
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderContent(): JSX.Element {
|
||||
const { selectedModel, cleanup, mapping } = this.state;
|
||||
const { reid, detectors, taskInstance } = this.props;
|
||||
|
||||
const models = [...reid, ...detectors];
|
||||
const model = selectedModel && models
|
||||
.filter((_model): boolean => _model.name === selectedModel)[0];
|
||||
|
||||
const excludedModelLabels: string[] = Object.keys(mapping);
|
||||
const isDetector = model && model.type === 'detector';
|
||||
const isReId = model && model.type === 'reid';
|
||||
const tags = isDetector ? excludedModelLabels
|
||||
.map((modelLabel: string) => this.renderMappingTag(
|
||||
modelLabel,
|
||||
mapping[modelLabel],
|
||||
)) : [];
|
||||
|
||||
const availableModelLabels = model ? model.labels
|
||||
.filter(
|
||||
(label: string) => !excludedModelLabels.includes(label),
|
||||
) : [];
|
||||
const taskLabels = taskInstance.labels.map(
|
||||
(label: any) => label.name,
|
||||
);
|
||||
|
||||
const mappingISAvailable = !!availableModelLabels.length
|
||||
&& !!taskLabels.length;
|
||||
|
||||
return (
|
||||
<div className='cvat-run-model-dialog'>
|
||||
{ this.renderModelSelector() }
|
||||
{ isDetector && tags}
|
||||
{ isDetector
|
||||
&& mappingISAvailable
|
||||
&& this.renderMappingInput(availableModelLabels, taskLabels)}
|
||||
{ isDetector
|
||||
&& (
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={cleanup}
|
||||
onChange={(e: any): void => this.setState({
|
||||
cleanup: e.target.checked,
|
||||
})}
|
||||
>
|
||||
Clean old annotations
|
||||
</Checkbox>
|
||||
</div>
|
||||
)}
|
||||
{ isReId && this.renderReidContent() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public render(): JSX.Element | false {
|
||||
const {
|
||||
selectedModel,
|
||||
mapping,
|
||||
cleanup,
|
||||
threshold,
|
||||
maxDistance,
|
||||
} = this.state;
|
||||
|
||||
const {
|
||||
reid,
|
||||
detectors,
|
||||
visible,
|
||||
taskInstance,
|
||||
runInference,
|
||||
closeDialog,
|
||||
} = this.props;
|
||||
|
||||
const models = [...reid, ...detectors];
|
||||
const activeModel = models.filter(
|
||||
(model): boolean => model.name === selectedModel,
|
||||
)[0];
|
||||
|
||||
const enabledSubmit = !!activeModel && (activeModel.type === 'reid'
|
||||
|| !!Object.keys(mapping).length);
|
||||
|
||||
return (
|
||||
visible && (
|
||||
<Modal
|
||||
closable={false}
|
||||
okType='primary'
|
||||
okText='Submit'
|
||||
onOk={(): void => {
|
||||
runInference(
|
||||
taskInstance,
|
||||
models
|
||||
.filter((model): boolean => model.name === selectedModel)[0],
|
||||
activeModel.type === 'detector' ? {
|
||||
mapping,
|
||||
cleanup,
|
||||
} : {
|
||||
threshold,
|
||||
max_distance: maxDistance,
|
||||
},
|
||||
);
|
||||
closeDialog();
|
||||
}}
|
||||
onCancel={(): void => closeDialog()}
|
||||
okButtonProps={{ disabled: !enabledSubmit }}
|
||||
title='Automatic annotation'
|
||||
visible
|
||||
>
|
||||
{ this.renderContent() }
|
||||
</Modal>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import ModelRunnerModalComponent from 'components/model-runner-modal/model-runner-modal';
|
||||
import { Model, CombinedState } from 'reducers/interfaces';
|
||||
import { startInferenceAsync, modelsActions } from 'actions/models-actions';
|
||||
|
||||
interface StateToProps {
|
||||
reid: Model[];
|
||||
detectors: Model[];
|
||||
activeProcesses: {
|
||||
[index: string]: string;
|
||||
};
|
||||
taskInstance: any;
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
runInference(
|
||||
taskInstance: any,
|
||||
model: Model,
|
||||
body: object,
|
||||
): void;
|
||||
closeDialog(): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const { models } = state;
|
||||
|
||||
return {
|
||||
reid: models.reid,
|
||||
detectors: models.detectors,
|
||||
activeProcesses: {},
|
||||
taskInstance: models.activeRunTask,
|
||||
visible: models.visibleRunWindows,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||
return ({
|
||||
runInference(
|
||||
taskInstance: any,
|
||||
model: Model,
|
||||
body: object,
|
||||
): void {
|
||||
dispatch(startInferenceAsync(taskInstance, model, body));
|
||||
},
|
||||
closeDialog(): void {
|
||||
dispatch(modelsActions.closeRunModelDialog());
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ModelRunnerModalComponent);
|
||||
Loading…
Reference in New Issue