# Dash Picture Annotation
<p><img alt="Banner" src="https://repository-images.githubusercontent.com/883421149/10c3593c-2d90-4eff-a3b5-761946985243"></p>
<p align="center">
<a href="https://github.com/cainmagi/dash-picture-annotation/releases/latest"><img alt="GitHub release (latest SemVer)" src="https://img.shields.io/github/v/release/cainmagi/dash-picture-annotation?logo=github&sort=semver&style=flat-square"></a>
<a href="https://github.com/cainmagi/dash-picture-annotation/releases"><img alt="GitHub all releases" src="https://img.shields.io/github/downloads/cainmagi/dash-picture-annotation/total?logo=github&style=flat-square"></a>
<a href="https://github.com/cainmagi/dash-picture-annotation/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/cainmagi/dash-picture-annotation?style=flat-square&logo=opensourceinitiative&logoColor=white"></a>
<a href="https://pypi.org/project/dash-picture-annotation"><img alt="PyPI - Downloads" src="https://img.shields.io/pypi/dm/dash-picture-annotation?style=flat-square&logo=pypi&logoColor=white&label=pypi"></a>
</p>
<p align="center">
<a href="https://github.com/cainmagi/dash-picture-annotation/actions/workflows/python-package.yml"><img alt="GitHub Actions (Build)" src="https://img.shields.io/github/actions/workflow/status/cainmagi/dash-picture-annotation/python-package.yml?style=flat-square&logo=githubactions&logoColor=white&label=build"></a>
<a href="https://github.com/cainmagi/dash-picture-annotation/actions/workflows/python-publish.yml"><img alt="GitHub Actions (Release)" src="https://img.shields.io/github/actions/workflow/status/cainmagi/dash-picture-annotation/python-publish.yml?style=flat-square&logo=githubactions&logoColor=white&label=release"></a>
</p>
Dash Picture Annotation is a Dash component library.
Dash porting version of the React project [React Picture Annotation :link:][git-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 |
| :---------------------------: | :-------------------------: |
| ![demo-react][pic-demo-react] | ![demo-dash][pic-demo-dash] |
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:
https://github.com/user-attachments/assets/398fa4ff-4926-4594-a9c6-9bb92d170c63
## 1. Install
Intall the **latest released version** of this package by using the PyPI source:
``` sh
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 :hammer:][tool-git], [NodeJS :hammer:][tool-nodejs], and [Yarn :hammer:][tool-yarn]:
```bash
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.
``` python
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:
```json
{
"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 :link:][link-demo-minimal].
A full demo for an integrated application can be found [here :link:][link-demo-usage], 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 :book:][link-contributing]
## 5. Changelog
See [Changelog.md :book:][link-changelog]
## 6. Acknowledgements
- [Kunduin/react-picture-annotation :link:][git-react-picture-annotation]: The original React component implementation of this project.
[git-react-picture-annotation]:https://github.com/Kunduin/react-picture-annotation
[tool-git]:https://git-scm.com/downloads
[tool-nodejs]:https://nodejs.org/en/download/package-manager
[tool-yarn]:https://yarnpkg.com/getting-started/install
[pic-demo-react]:https://raw.githubusercontent.com/cainmagi/dash-picture-annotation/main/display/demo-react.png
[pic-demo-dash]:https://raw.githubusercontent.com/cainmagi/dash-picture-annotation/main/display/demo-dash.png
[link-contributing]:https://github.com/cainmagi/dash-picture-annotation/blob/main/CONTRIBUTING.md
[link-changelog]:https://github.com/cainmagi/dash-picture-annotation/blob/main/Changelog.md
[link-demo-minimal]:https://github.com/cainmagi/dash-picture-annotation/blob/main/examples/minimal.py
[link-demo-usage]:https://github.com/cainmagi/dash-picture-annotation/blob/main/usage.py
Raw data
{
"_id": null,
"home_page": null,
"name": "dash-picture-annotation",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "Yuchen Jin <cainmagi@gmail.com>",
"keywords": "python, python3, python-library, dash, plotly-dash, python-dash, annotation, annotation-tool, image-annotation, labeling, image-labeling, object-detection, deep-learning, data-visualization",
"author": null,
"author_email": "Yuchen Jin <cainmagi@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/f0/32/53c654860537ff57d38f4aa9073849ab8a409cc1d3d8ce48856c24f0979d/dash_picture_annotation-0.1.1.tar.gz",
"platform": null,
"description": "# Dash Picture Annotation\n\n<p><img alt=\"Banner\" src=\"https://repository-images.githubusercontent.com/883421149/10c3593c-2d90-4eff-a3b5-761946985243\"></p>\n\n<p align=\"center\">\n <a href=\"https://github.com/cainmagi/dash-picture-annotation/releases/latest\"><img alt=\"GitHub release (latest SemVer)\" src=\"https://img.shields.io/github/v/release/cainmagi/dash-picture-annotation?logo=github&sort=semver&style=flat-square\"></a>\n <a href=\"https://github.com/cainmagi/dash-picture-annotation/releases\"><img alt=\"GitHub all releases\" src=\"https://img.shields.io/github/downloads/cainmagi/dash-picture-annotation/total?logo=github&style=flat-square\"></a>\n <a href=\"https://github.com/cainmagi/dash-picture-annotation/blob/main/LICENSE\"><img alt=\"GitHub\" src=\"https://img.shields.io/github/license/cainmagi/dash-picture-annotation?style=flat-square&logo=opensourceinitiative&logoColor=white\"></a>\n <a href=\"https://pypi.org/project/dash-picture-annotation\"><img alt=\"PyPI - Downloads\" src=\"https://img.shields.io/pypi/dm/dash-picture-annotation?style=flat-square&logo=pypi&logoColor=white&label=pypi\"></a>\n</p>\n<p align=\"center\">\n <a href=\"https://github.com/cainmagi/dash-picture-annotation/actions/workflows/python-package.yml\"><img alt=\"GitHub Actions (Build)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-picture-annotation/python-package.yml?style=flat-square&logo=githubactions&logoColor=white&label=build\"></a>\n <a href=\"https://github.com/cainmagi/dash-picture-annotation/actions/workflows/python-publish.yml\"><img alt=\"GitHub Actions (Release)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-picture-annotation/python-publish.yml?style=flat-square&logo=githubactions&logoColor=white&label=release\"></a>\n</p>\n\nDash Picture Annotation is a Dash component library.\n\nDash porting version of the React project [React Picture Annotation :link:][git-react-picture-annotation]. Provide a simple annotation window for a single picture.\n\nThe 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.\n\n| React Picture Annotation | Dash Picture Annotation |\n| :---------------------------: | :-------------------------: |\n| ![demo-react][pic-demo-react] | ![demo-dash][pic-demo-dash] |\n\nCompared to the original project, this project has the following special features that the original React project does not support:\n\n1. Responsive sizing: The width of the annotator can be automatically adjusted according to the parent web element.\n2. Different modes: When selecting an annotation, the modifier can be configured as an input box or a dropdown menu box.\n3. Data sanitized: The data is simply sanitized. Even if a not standardized data is passed to the annotator, it still works.\n4. Anti-mistakes: A threshold of the annotation size can be configured to prevent users create a tiny annotation item by mistake.\n5. Disabled: A flag can be configured to make the annotator disabled.\n6. Specified colors: A special color can be configured for an annotator with a specific comment. Different comments can have different colors.\n7. 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.\n\nPreview a quick video demo here:\n\nhttps://github.com/user-attachments/assets/398fa4ff-4926-4594-a9c6-9bb92d170c63\n\n## 1. Install\n\nIntall the **latest released version** of this package by using the PyPI source:\n\n``` sh\npython -m pip install dash-picture-annotation\n```\n\nOr use the following commands to install **the developing version** from the GitHub Source when you have already installed [Git :hammer:][tool-git], [NodeJS :hammer:][tool-nodejs], and [Yarn :hammer:][tool-yarn]:\n\n```bash\ngit clone https://github.com/cainmagi/dash-picture-annotation\ncd dash-picture-annotation\npython -m pip install -r requirements-dev.txt\nyarn install\nyarn build\npython -m pip install .\n```\n\n## 2. Usage\n\nThe following signature shows the basic usage of this component.\n\n``` python\nimport dash_picture_annotation as dpa\n\ndpa.DashPictureAnnotation(\n id=\"annotator\",\n style={\"height\": \"80vh\"},\n data=default_data, # Can be `None`\n image=\"/assets/test_image.svg\", # Can be `None`\n options=None,\n)\n```\n\nwhere the `data` is typed by `dpa.Annotations`. It should be formatted like this:\n\n```json\n{\n \"timestamp\": 0,\n \"data\": [\n {\n \"id\": \"N5fewQ\",\n \"mark\": {\n \"x\": -224.45, \"y\": 62.76, \"width\": 125.53, \"height\": 125.53, \"type\": \"RECT\"\n },\n \"comment\": \"has-a-type\"\n },\n {\n \"id\": \"ibJMdK\",\n \"mark\": {\n \"x\": -36.15, \"y\": 62.76, \"width\": 125.53, \"height\": 125.53, \"type\": \"RECT\"\n },\n },\n {\n \"id\": \"...\",\n \"...\": \"...\",\n }\n ]\n}\n```\n\nA full demo for a minimal example can be found [here :link:][link-demo-minimal].\n\nA full demo for an integrated application can be found [here :link:][link-demo-usage], where the basic usages are displayed.\n\n## 3. Documentation\n\nCheck the documentation to find more details about the examples and APIs.\n\nhttps://cainmagi.github.io/dash-picture-annotation/\n\n## 4. Contributing\n\nSee [CONTRIBUTING.md :book:][link-contributing]\n\n## 5. Changelog\n\nSee [Changelog.md :book:][link-changelog]\n\n## 6. Acknowledgements\n\n- [Kunduin/react-picture-annotation :link:][git-react-picture-annotation]: The original React component implementation of this project.\n\n[git-react-picture-annotation]:https://github.com/Kunduin/react-picture-annotation\n\n[tool-git]:https://git-scm.com/downloads\n[tool-nodejs]:https://nodejs.org/en/download/package-manager\n[tool-yarn]:https://yarnpkg.com/getting-started/install\n\n[pic-demo-react]:https://raw.githubusercontent.com/cainmagi/dash-picture-annotation/main/display/demo-react.png\n[pic-demo-dash]:https://raw.githubusercontent.com/cainmagi/dash-picture-annotation/main/display/demo-dash.png\n\n[link-contributing]:https://github.com/cainmagi/dash-picture-annotation/blob/main/CONTRIBUTING.md\n[link-changelog]:https://github.com/cainmagi/dash-picture-annotation/blob/main/Changelog.md\n\n[link-demo-minimal]:https://github.com/cainmagi/dash-picture-annotation/blob/main/examples/minimal.py\n[link-demo-usage]:https://github.com/cainmagi/dash-picture-annotation/blob/main/usage.py\n",
"bugtrack_url": null,
"license": "MIT License",
"summary": "Dash porting version of the React project React Picture Annotation. Provide a simple annotation window for a single picture.",
"version": "0.1.1",
"project_urls": {
"Changelog": "https://github.com/cainmagi/dash-picture-annotation/blob/main/Changelog.md",
"Documentation": "https://cainmagi.github.io/dash-picture-annotation/",
"Homepage": "https://github.com/cainmagi/dash-picture-annotation",
"Issues": "https://github.com/cainmagi/dash-picture-annotation/issues",
"Repository": "https://github.com/cainmagi/dash-picture-annotation.git"
},
"split_keywords": [
"python",
" python3",
" python-library",
" dash",
" plotly-dash",
" python-dash",
" annotation",
" annotation-tool",
" image-annotation",
" labeling",
" image-labeling",
" object-detection",
" deep-learning",
" data-visualization"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "53b402f1706b67b5a4553ab7a664c6d603cde8c649cd1e8c717d45c6bdf2259f",
"md5": "c21e9962fc5ebb3d7d4bfbbf773490ed",
"sha256": "f261b239a9f1fee6a09a15b86a7fd6974133114d622a9312b4f9cd31756ada31"
},
"downloads": -1,
"filename": "dash_picture_annotation-0.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "c21e9962fc5ebb3d7d4bfbbf773490ed",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 257802,
"upload_time": "2024-11-10T20:18:00",
"upload_time_iso_8601": "2024-11-10T20:18:00.986277Z",
"url": "https://files.pythonhosted.org/packages/53/b4/02f1706b67b5a4553ab7a664c6d603cde8c649cd1e8c717d45c6bdf2259f/dash_picture_annotation-0.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "f03253c654860537ff57d38f4aa9073849ab8a409cc1d3d8ce48856c24f0979d",
"md5": "b340f8e7e86de90c2046d703050053e7",
"sha256": "e55c34408739c15c67ea2f7e366f1dc65a9a4a6897bd29ee6b1ee54508477f84"
},
"downloads": -1,
"filename": "dash_picture_annotation-0.1.1.tar.gz",
"has_sig": false,
"md5_digest": "b340f8e7e86de90c2046d703050053e7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 2896295,
"upload_time": "2024-11-10T20:18:04",
"upload_time_iso_8601": "2024-11-10T20:18:04.945900Z",
"url": "https://files.pythonhosted.org/packages/f0/32/53c654860537ff57d38f4aa9073849ab8a409cc1d3d8ce48856c24f0979d/dash_picture_annotation-0.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-10 20:18:04",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "cainmagi",
"github_project": "dash-picture-annotation",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "dash-picture-annotation"
}
JSON
