pixano / pixano-elements Goto Github PK

Pixano Elements - Re-usable web components dedicated to data annotation tasks.

License: Other

TypeScript 99.42% JavaScript 0.58%

computer-vision annotation-tool deep-learning web-components instance-segmentation semantic-segmentation panoptic-segmentation bounding-box detection polygon

pixano-elements's Introduction

Data-centric AI building blocks for computer vision applications

Under active development, subject to API change

Pixano is an open-source tool by CEA List for exploring and annotating your dataset using AI features:

Fast dataset navigation using the the modern storage format Lance
Multi-view datasets support for images, and soon for 3D point clouds and videos
Import and export support for dataset formats like COCO
Semantic search using models like CLIP
Smart segmentation using models like SAM

Getting started

Installing Pixano

As Pixano requires specific versions for its dependencies, we recommend creating a new Python virtual environment to install it.

For example, with conda:

conda create -n pixano_env python=3.10
conda activate pixano_env

Then, you can install the Pixano package inside that environment with pip:

pip install pixano

Using your datasets

Please refer to our Jupyter notebooks for importing and exporting your datasets.

Using the Pixano app

Please refer to this link for using the Pixano app.

Contributing

Please refer to the CONTRIBUTING.md for information on running Pixano locally and guidelines on how to publish your contributions.

License

Pixano is licensed under the CeCILL-C license.

pixano-elements's People

Contributors

Stargazers

Watchers

Forkers

chappie74 anthar bbsaclay camilledupont bpioge magwyz mahdiabdolmohammadi tomvaleo vkachurka manivmtc bertrandrenault irlab-therapeutics francoconci morenoplakubluetensor ankitacigniti drscaon

pixano-elements's Issues

Unexpected identifier error with npx serve demo

I am installing pixano-elements on Windows10. Node version 10.19, npm 6.13.4. And I receive the following error

PS C:\Users\m\Work\pixano-elements> npx serve demo
npx : 91 installé(s) en 9.123s
Unexpected identifier```

pxn-rectangle component : Unwanted creation of box while moving the image

Quick image moving create unwanted box.

The bug can be reproduced in the bouding-box demo on the pixano website : http://pixano.cea.fr/bounding-box/ with Chrome Version 83.0.4103.61 (Build officiel) (64 bits).
I think this bug affects all pixano elements.
Steps to reproduce : Enable the mode creation by clicking the "Add rectangle" button and then move the image (with the right click) quicky. It creates a small rectangle.

I attach a video of the bug.

bug-pixano-rectangle.zip

onTabulation selection does not reset previously selected shapes display

onTabulation (pxn-canvas-2d.ts) do a this.targetShapes.set([nextShape]).

In the ShapesEditController, we observe the targetShapes but the "set" does not "clear" the shapes.

pixano-elements/packages/graphics-2d/src/controller.ts

Line 68 in fbdff55

case 'set':

The case "set" should do the action that is in the case "clear" and then, the action in the case "add". We can also (the lazy way) just call this.targetShapes.clear() in onTabulation

Canvas elements

Hi guys, I'm working with elements for annotations and have few questions:

How do you select a polygon, for instance I want to reference a polygon by id?
How do you remove a polygon on click base?

goTo proposal (in ViewControls)

/**
 * 
 * Center the view on the point [targetX, targetY]. Apply a zoom if provided
 * 
 * @param targetX 
 * @param targetY 
 * @param zoom 
 * @param normalized 
 */
goTo(targetX: number, targetY: number, zoom : number, normalized = true) {
    if (!normalized)
      var { x, y } = this.viewer.normalize({ x, y });
    else {
      var { x, y } = { x: targetX, y: targetY };
    }

    if(zoom){
      this.viewer.s = zoom;
      this.viewer.stage.scale.set(this.viewer.s * this.viewer.rw / this.viewer.imageWidth,
        this.viewer.s * this.viewer.rh / this.viewer.imageHeight);
    }

    let centerXOffset = (this.viewer.canvasWidth) / 2 / this.viewer.s;
    let centerYOffset = (this.viewer.canvasHeight) / 2 / this.viewer.s;


    this.viewer.rx = centerXOffset + (((x * this.viewer.rw * this.viewer.s) + this.viewer.sx) / this.viewer.s * (-1));
    this.viewer.ry = centerYOffset + (((y * this.viewer.rh * this.viewer.s) + this.viewer.sy) / this.viewer.s * (-1));

    this.viewer.stage.position.set(this.viewer.rx * this.viewer.s + this.viewer.sx, this.viewer.ry * this.viewer.s + this.viewer.sy);

    this.triggerOnZoom();
    this.computeHitArea();
  }

Draw text proposal

/**

Draw the text tag on the top left of the shape
*/
public drawText() {

this.clearText();
const content = this.data['text'] || null;

if (!content) {
  return;
}

let highestVertice = this.topLeftVertice(this.data.geometry.vertices);

let textPositionX = highestVertice[0] * this.scaleX;
let textPositionY = highestVertice[1] * this.scaleY;

const textSize = 10;

const style = new PIXITextStyle({
  fontFamily: 'Arial',
  fontSize: textSize,
  fill: 0x444444
});

let textMetrics = PIXITextMetrics.measureText(content, style)

const boxWidth = Math.round(textMetrics.width + 5);
const boxHeight = Math.round(textMetrics.height + 3);

this.textGraphic.beginFill(0xFFFFFF, 0.80);
this.textGraphic.lineStyle(1, this.hex, 1, 0.5, true);
this.textGraphic.drawRect(
  0, 0,
  boxWidth,
  boxHeight
);


const parent = this.getHigherParent();
if (parent) {
  this.textGraphic.scale.x = 1.5 / parent.scale.x;
  this.textGraphic.scale.y = 1.5 / parent.scale.y;
}

let textNode = new PIXIText(content, style);
textNode.roundPixels = true;
textNode.resolution = 3;
textNode.anchor.x = 0.5;
textNode.anchor.y = 0.6;
textNode.x = Math.round(boxWidth / 2);
textNode.y = Math.round(boxHeight / 2);

this.textGraphic.addChild(textNode);
this.textGraphic.pivot.set(boxWidth, boxHeight);
this.textGraphic.x = textPositionX;
this.textGraphic.y = textPositionY;
this.textGraphic.endFill();

}

Ability to extend Shapes

You provide a way to extend components or to change controllers behavior but there is no way to extend Shape (RectangleShape, PolygonShape etc..) since we can't override the dataToShape function used in the ShapeManager.

I fixed it by adding
public shapeFactory: { dataToShape : ((s: ShapeData) => Shape) } = { dataToShape : dataToShape };
as a property in the ShapeManager class
and then, by changing the two
const obj = dataToShape(s);
to
const obj = this.shapeFactory.dataToShape(s);
in the constructor of ShapeManager (line 530 and 553 of /packages/graphics-2d/src/shapes-manager.ts)

These 3 changes make me able to set my own dataToShape method when I extend pixano webcomponents.
this.shManager.shapeFactory.dataToShape = myOwnDataToShape;

Do you think you can make this kind of changes so we will be able to extend Shapes ?

Thank you for your help.