Dash Picture Annotation

Dash Picture Annotation is a Dash component library.

Dash porting version of the React project React Picture Annotation 🔗. Provide a simple annotation window for a single picture.

The following two figures compare the demos of the original React version and the ported Dash version. Since this project is just a dash component wrapper on the original React component, the performance is the same.

React Picture Annotation	Dash Picture Annotation

Compared to the original project, this project has the following special features that the original React project does not support:

1. Responsive sizing: The width of the annotator can be automatically adjusted according to the parent web element.
2. Different modes: When selecting an annotation, the modifier can be configured as an input box or a dropdown menu box.
3. Data sanitized: The data is simply sanitized. Even if a not standardized data is passed to the annotator, it still works.
4. Anti-mistakes: A threshold of the annotation size can be configured to prevent users create a tiny annotation item by mistake.
5. Disabled: A flag can be configured to make the annotator disabled.
6. Specified colors: A special color can be configured for an annotator with a specific comment. Different comments can have different colors.
7. Dynamic colors: Without specifying colors manually, a flag can enable the colors to be automatically calculated based on the hash code of the annotation comments.

Preview a quick video demo here:

demo.mp4

1. Install

Intall the latest released version of this package by using the PyPI source:

python -m pip install dash-picture-annotation

Or use the following commands to install the developing version from the GitHub Source when you have already installed Git 🔨, NodeJS 🔨, and Yarn 🔨:

git clone https://github.com/cainmagi/dash-picture-annotation
cd dash-picture-annotation
python -m pip install -r requirements-dev.txt
yarn install
yarn build
python -m pip install .

2. Usage

The following signature shows the basic usage of this component.

import dash_picture_annotation as dpa

dpa.DashPictureAnnotation(
    id="annotator",
    style={"height": "80vh"},
    data=default_data,  # Can be `None`
    image="/assets/test_image.svg",  # Can be `None`
    options=None,
)

where the data is typed by dpa.Annotations. It should be formatted like this:

{
  "timestamp": 0,
  "data": [
    {
      "id": "N5fewQ",
      "mark": {
        "x": -224.45, "y": 62.76, "width": 125.53, "height": 125.53, "type": "RECT"
      },
      "comment": "has-a-type"
    },
    {
      "id": "ibJMdK",
      "mark": {
        "x": -36.15, "y": 62.76, "width": 125.53, "height": 125.53, "type": "RECT"
      },
    },
    {
      "id": "...",
      "...": "...",
    }
  ]
}

A full demo for a minimal example can be found here 🔗.

A full demo for an integrated application can be found here 🔗, where the basic usages are displayed.

3. Documentation

Check the documentation to find more details about the examples and APIs.

https://cainmagi.github.io/dash-picture-annotation/

4. Contributing

See CONTRIBUTING.md 📖

5. Changelog

See Changelog.md 📖

6. Acknowledgements

• Kunduin/react-picture-annotation 🔗: The original React component implementation of this project.