Semi-automatic tools enhancements (Stage 0) (#3417)

* Improved removable points, added a button to finish current object
* Code refactoring for ai tools and opencv
* Fixed style for workspace selector
* IOG UX fix
* Updated version & changelog
* Added 'min_neg_points' parameter to serverless interactors
* Return 'min_neg_points' from the server

CHANGELOG.md

@@ -13,13 +13,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support of cloud storage without copying data into CVAT: server part (<https://github.com/openvinotoolkit/cvat/pull/2620>)
 - Filter `is_active` for user list (<https://github.com/openvinotoolkit/cvat/pull/3235>)
 - Ability to export/import tasks (<https://github.com/openvinotoolkit/cvat/pull/3056>)
+- Explicit "Done" button when drawing any polyshapes (<https://github.com/openvinotoolkit/cvat/pull/3417>)
 
 ### Changed
 
 - Updated manifest format, added meta with related images (<https://github.com/openvinotoolkit/cvat/pull/3122>)
 - Update of COCO format documentation (<https://github.com/openvinotoolkit/cvat/pull/3197>)
 - Updated Webpack Dev Server config to add proxxy (<https://github.com/openvinotoolkit/cvat/pull/3368>)
 - Update to Django 3.1.12 (<https://github.com/openvinotoolkit/cvat/pull/3378>)
+- Updated visibility for removable points in AI tools (<https://github.com/openvinotoolkit/cvat/pull/3417>)
+- Updated UI handling for IOG serverless function (<https://github.com/openvinotoolkit/cvat/pull/3417>)
 
 ### Deprecated
 

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
  "name": "cvat-canvas",
- "version": "2.4.5",
+ "version": "2.5.0",
  "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
  "main": "src/canvas.ts",
  "scripts": {

cvat-canvas/src/scss/canvas.scss

@@ -155,6 +155,17 @@ polyline.cvat_canvas_shape_splitting {
  fill: blueviolet;
 }
 
+.cvat_canvas_interact_intermediate_shape {
+ @extend .cvat_canvas_shape;
+}
+
+.cvat_canvas_removable_interaction_point {
+ cursor:
+ url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMUw5IDlNMSA5TDkgMSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K')
+ 10 10,
+ auto;
+}
+
 .svg_select_boundingRect {
  opacity: 0;
  pointer-events: none;

cvat-canvas/src/typescript/canvasModel.ts

@@ -77,10 +77,14 @@ export interface InteractionData {
  crosshair?: boolean;
  minPosVertices?: number;
  minNegVertices?: number;
- enableNegVertices?: boolean;
+ startWithBox?: boolean;
  enableThreshold?: boolean;
  enableSliding?: boolean;
  allowRemoveOnlyLast?: boolean;
+ intermediateShape?: {
+ shapeType: string;
+ points: number[];
+ };
 }
 
 export interface InteractionResult {
@@ -551,7 +555,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
  throw Error(`Canvas is busy. Action: ${this.data.mode}`);
  }
 
- if (interactionData.enabled) {
+ if (interactionData.enabled && !interactionData.intermediateShape) {
  if (this.data.interactionData.enabled) {
  throw new Error('Interaction has been already started');
  } else if (!interactionData.shapeType) {

cvat-canvas/src/typescript/canvasView.ts

@@ -23,6 +23,7 @@ import consts from './consts';
 import {
  translateToSVG,
  translateFromSVG,
+ translateToCanvas,
  pointsToNumberArray,
  parsePoints,
  displayShapeSize,
@@ -103,7 +104,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
  private translateToCanvas(points: number[]): number[] {
  const { offset } = this.controller.geometry;
- return points.map((coord: number): number => coord + offset);
+ return translateToCanvas(offset, points);
  }
 
  private translateFromCanvas(points: number[]): number[] {
@@ -1267,9 +1268,11 @@ export class CanvasViewImpl implements CanvasView, Listener {
  }
  } else if (reason === UpdateReasons.INTERACT) {
  const data: InteractionData = this.controller.interactionData;
- if (data.enabled && this.mode === Mode.IDLE) {
- this.canvas.style.cursor = 'crosshair';
- this.mode = Mode.INTERACT;
+ if (data.enabled && (this.mode === Mode.IDLE || data.intermediateShape)) {
+ if (!data.intermediateShape) {
+ this.canvas.style.cursor = 'crosshair';
+ this.mode = Mode.INTERACT;
+ }
  this.interactionHandler.interact(data);
  } else {
  this.canvas.style.cursor = '';

cvat-canvas/src/typescript/interactionHandler.ts

@@ -5,7 +5,9 @@
 import * as SVG from 'svg.js';
 import consts from './consts';
 import Crosshair from './crosshair';
-import { translateToSVG } from './shared';
+import {
+ translateToSVG, PropType, stringifyPoints, translateToCanvas,
+} from './shared';
 import { InteractionData, InteractionResult, Geometry } from './canvasModel';
 
 export interface InteractionHandler {
@@ -26,6 +28,8 @@ export class InteractionHandlerImpl implements InteractionHandler {
  private crosshair: Crosshair;
  private threshold: SVG.Rect | null;
  private thresholdRectSize: number;
+ private intermediateShape: PropType<InteractionData, 'intermediateShape'>;
+ private drawnIntermediateShape: SVG.Shape;
 
  private prepareResult(): InteractionResult[] {
  return this.interactionShapes.map(
@@ -65,8 +69,10 @@ export class InteractionHandlerImpl implements InteractionHandler {
  return enabled && !ctrlKey && !!interactionShapes.length;
  }
 
- const minPosVerticesAchieved = typeof minPosVertices === 'undefined' || minPosVertices <= positiveShapes.length;
- const minNegVerticesAchieved = typeof minNegVertices === 'undefined' || minPosVertices <= negativeShapes.length;
+ const minPosVerticesDefined = Number.isInteger(minPosVertices);
+ const minNegVerticesDefined = Number.isInteger(minNegVertices) && minNegVertices >= 0;
+ const minPosVerticesAchieved = !minPosVerticesDefined || minPosVertices <= positiveShapes.length;
+ const minNegVerticesAchieved = !minNegVerticesDefined || minNegVertices <= negativeShapes.length;
  const minimumVerticesAchieved = minPosVerticesAchieved && minNegVerticesAchieved;
  return enabled && !ctrlKey && minimumVerticesAchieved && shapesWereUpdated;
  }
@@ -91,7 +97,7 @@ export class InteractionHandlerImpl implements InteractionHandler {
 
  private interactPoints(): void {
  const eventListener = (e: MouseEvent): void => {
- if ((e.button === 0 || (e.button === 2 && this.interactionData.enableNegVertices)) && !e.altKey) {
+ if ((e.button === 0 || (e.button === 2 && this.interactionData.minNegVertices >= 0)) && !e.altKey) {
  e.preventDefault();
  const [cx, cy] = translateToSVG((this.canvas.node as any) as SVGSVGElement, [e.clientX, e.clientY]);
  if (!this.isWithinFrame(cx, cy)) return;
@@ -121,8 +127,10 @@ export class InteractionHandlerImpl implements InteractionHandler {
  }
  }
 
+ self.addClass('cvat_canvas_removable_interaction_point');
  self.attr({
  'stroke-width': consts.POINTS_SELECTED_STROKE_WIDTH / this.geometry.scale,
+ r: (consts.BASE_POINT_SIZE * 1.5) / this.geometry.scale,
  });
 
  self.on('mousedown', (_e: MouseEvent): void => {
@@ -132,6 +140,9 @@ export class InteractionHandlerImpl implements InteractionHandler {
  this.interactionShapes = this.interactionShapes.filter(
  (shape: SVG.Shape): boolean => shape !== self,
  );
+ if (this.interactionData.startWithBox && this.interactionShapes.length === 1) {
+ this.interactionShapes[0].style({ visibility: '' });
+ }
  this.shapesWereUpdated = true;
  if (this.shouldRaiseEvent(_e.ctrlKey)) {
  this.onInteraction(this.prepareResult(), true, false);
@@ -140,8 +151,10 @@ export class InteractionHandlerImpl implements InteractionHandler {
  });
 
  self.on('mouseleave', (): void => {
+ self.removeClass('cvat_canvas_removable_interaction_point');
  self.attr({
  'stroke-width': consts.POINTS_STROKE_WIDTH / this.geometry.scale,
+ r: consts.BASE_POINT_SIZE / this.geometry.scale,
  });
 
  self.off('mousedown');
@@ -153,7 +166,7 @@ export class InteractionHandlerImpl implements InteractionHandler {
  this.canvas.on('mousedown.interaction', eventListener);
  }
 
- private interactRectangle(): void {
+ private interactRectangle(shouldFinish: boolean, onContinue?: () => void): void {
  let initialized = false;
  const eventListener = (e: MouseEvent): void => {
  if (e.button === 0 && !e.altKey) {
@@ -170,11 +183,15 @@ export class InteractionHandlerImpl implements InteractionHandler {
  this.canvas.on('mousedown.interaction', eventListener);
  this.currentInteractionShape
  .on('drawstop', (): void => {
+ this.canvas.off('mousedown.interaction', eventListener);
  this.interactionShapes.push(this.currentInteractionShape);
  this.shapesWereUpdated = true;
 
- this.canvas.off('mousedown.interaction', eventListener);
- this.interact({ enabled: false });
+ if (shouldFinish) {
+ this.interact({ enabled: false });
+ } else if (onContinue) {
+ onContinue();
+ }
  })
  .addClass('cvat_canvas_shape_drawing')
  .attr({
@@ -194,15 +211,24 @@ export class InteractionHandlerImpl implements InteractionHandler {
 
  private startInteraction(): void {
  if (this.interactionData.shapeType === 'rectangle') {
- this.interactRectangle();
+ this.interactRectangle(true);
  } else if (this.interactionData.shapeType === 'points') {
- this.interactPoints();
+ if (this.interactionData.startWithBox) {
+ this.interactRectangle(false, (): void => this.interactPoints());
+ } else {
+ this.interactPoints();
+ }
  } else {
  throw new Error('Interactor implementation supports only rectangle and points');
  }
  }
 
  private release(): void {
+ if (this.drawnIntermediateShape) {
+ this.drawnIntermediateShape.remove();
+ this.drawnIntermediateShape = null;
+ }
+
  if (this.crosshair) {
  this.removeCrosshair();
  }
@@ -241,6 +267,31 @@ export class InteractionHandlerImpl implements InteractionHandler {
  return imageX >= 0 && imageX < width && imageY >= 0 && imageY < height;
  }
 
+ private updateIntermediateShape(): void {
+ const { intermediateShape, geometry } = this;
+ if (this.drawnIntermediateShape) {
+ this.drawnIntermediateShape.remove();
+ }
+
+ if (!intermediateShape) return;
+ const { shapeType, points } = intermediateShape;
+ if (shapeType === 'polygon') {
+ this.drawnIntermediateShape = this.canvas
+ .polygon(stringifyPoints(translateToCanvas(geometry.offset, points)))
+ .attr({
+ 'color-rendering': 'optimizeQuality',
+ 'shape-rendering': 'geometricprecision',
+ 'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+ fill: 'none',
+ })
+ .addClass('cvat_canvas_interact_intermediate_shape');
+ } else {
+ throw new Error(
+ `Shape type "${shapeType}" was not implemented at interactionHandler::updateIntermediateShape`,
+ );
+ }
+ }
+
  public constructor(
  onInteraction: (
  shapes: InteractionResult[] | null,
@@ -264,6 +315,8 @@ export class InteractionHandlerImpl implements InteractionHandler {
  this.crosshair = new Crosshair();
  this.threshold = null;
  this.thresholdRectSize = 300;
+ this.intermediateShape = null;
+ this.drawnIntermediateShape = null;
  this.cursorPosition = {
  x: 0,
  y: 0,
@@ -334,16 +387,27 @@ export class InteractionHandlerImpl implements InteractionHandler {
  : [...this.interactionShapes];
  for (const shape of shapesToBeScaled) {
  if (shape.type === 'circle') {
- (shape as SVG.Circle).radius(consts.BASE_POINT_SIZE / this.geometry.scale);
- shape.attr('stroke-width', consts.POINTS_STROKE_WIDTH / this.geometry.scale);
+ if (shape.hasClass('cvat_canvas_removable_interaction_point')) {
+ (shape as SVG.Circle).radius((consts.BASE_POINT_SIZE * 1.5) / this.geometry.scale);
+ shape.attr('stroke-width', consts.POINTS_SELECTED_STROKE_WIDTH / this.geometry.scale);
+ } else {
+ (shape as SVG.Circle).radius(consts.BASE_POINT_SIZE / this.geometry.scale);
+ shape.attr('stroke-width', consts.POINTS_STROKE_WIDTH / this.geometry.scale);
+ }
  } else {
  shape.attr('stroke-width', consts.BASE_STROKE_WIDTH / this.geometry.scale);
  }
  }
  }
 
  public interact(interactionData: InteractionData): void {
- if (interactionData.enabled) {
+ if (interactionData.intermediateShape) {
+ this.intermediateShape = interactionData.intermediateShape;
+ this.updateIntermediateShape();
+ if (this.interactionData.startWithBox) {
+ this.interactionShapes[0].style({ visibility: 'hidden' });
+ }
+ } else if (interactionData.enabled) {
  this.interactionData = interactionData;
  this.initInteraction();
  this.startInteraction();

cvat-canvas/src/typescript/shared.ts

@@ -181,3 +181,9 @@ export function vectorLength(vector: Vector2D): number {
  const sqrJ = vector.j ** 2;
  return Math.sqrt(sqrI + sqrJ);
 }
+
+export function translateToCanvas(offset: number, points: number[]): number[] {
+ return points.map((coord: number): number => coord + offset);
+}
+
+export type PropType<T, Prop extends keyof T> = T[Prop];

cvat-core/src/ml-model.js

@@ -17,7 +17,8 @@ class MLModel {
  this._params = {
  canvas: {
  minPosVertices: data.min_pos_points,
- enableNegVertices: true,
+ minNegVertices: data.min_neg_points,
+ startWithBox: data.startswith_box,
  },
  };
  }

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
  "name": "cvat-ui",
- "version": "1.20.7",
+ "version": "1.21.0",
  "description": "CVAT single-page application",
  "main": "src/index.tsx",
  "scripts": {