{"id":19091823,"url":"https://github.com/cainmagi/dash-picture-annotation","last_synced_at":"2026-02-18T15:31:13.807Z","repository":{"id":261149912,"uuid":"883421149","full_name":"cainmagi/dash-picture-annotation","owner":"cainmagi","description":"Dash porting version of the React project React Picture Annotation. Provide a simple annotation window for a single picture.","archived":false,"fork":false,"pushed_at":"2025-04-04T21:00:20.000Z","size":3934,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-22T15:47:17.360Z","etag":null,"topics":["annotation","annotation-tool","dash","data-visualization","deep-learning","image-annotation","image-labeling","labeling","object-detection","plotly-dash","python","python-dash","python-library","python3"],"latest_commit_sha":null,"homepage":"https://cainmagi.github.io/dash-picture-annotation/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cainmagi.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-04T23:51:53.000Z","updated_at":"2025-04-11T05:14:20.000Z","dependencies_parsed_at":"2024-12-31T20:17:37.794Z","dependency_job_id":"d4062364-9f47-4f04-a3e6-8cd2e10275e4","html_url":"https://github.com/cainmagi/dash-picture-annotation","commit_stats":null,"previous_names":["cainmagi/dash-picture-annotation"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/cainmagi/dash-picture-annotation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-picture-annotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-picture-annotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-picture-annotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-picture-annotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cainmagi","download_url":"https://codeload.github.com/cainmagi/dash-picture-annotation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cainmagi%2Fdash-picture-annotation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274117108,"owners_count":25225098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annotation","annotation-tool","dash","data-visualization","deep-learning","image-annotation","image-labeling","labeling","object-detection","plotly-dash","python","python-dash","python-library","python3"],"created_at":"2024-11-09T03:17:08.873Z","updated_at":"2026-02-18T15:31:13.800Z","avatar_url":"https://github.com/cainmagi.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Picture Annotation\n\n\u003cp\u003e\u003cimg alt=\"Banner\" src=\"https://repository-images.githubusercontent.com/883421149/10c3593c-2d90-4eff-a3b5-761946985243\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-picture-annotation/releases/latest\"\u003e\u003cimg alt=\"GitHub release (latest SemVer)\" src=\"https://img.shields.io/github/v/release/cainmagi/dash-picture-annotation?logo=github\u0026sort=semver\u0026style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-picture-annotation/releases\"\u003e\u003cimg alt=\"GitHub all releases\" src=\"https://img.shields.io/github/downloads/cainmagi/dash-picture-annotation/total?logo=github\u0026style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-picture-annotation/blob/main/LICENSE\"\u003e\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/cainmagi/dash-picture-annotation?style=flat-square\u0026logo=opensourceinitiative\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://pypi.org/project/dash-picture-annotation\"\u003e\u003cimg alt=\"PyPI - Downloads\" src=\"https://img.shields.io/pypi/dm/dash-picture-annotation?style=flat-square\u0026logo=pypi\u0026logoColor=white\u0026label=pypi\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-picture-annotation/actions/workflows/python-package.yml\"\u003e\u003cimg alt=\"GitHub Actions (Build)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-picture-annotation/python-package.yml?style=flat-square\u0026logo=githubactions\u0026logoColor=white\u0026label=build\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cainmagi/dash-picture-annotation/actions/workflows/python-publish.yml\"\u003e\u003cimg alt=\"GitHub Actions (Release)\" src=\"https://img.shields.io/github/actions/workflow/status/cainmagi/dash-picture-annotation/python-publish.yml?style=flat-square\u0026logo=githubactions\u0026logoColor=white\u0026label=release\"\u003e\u003c/a\u003e\n\u003c/p\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcainmagi%2Fdash-picture-annotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcainmagi%2Fdash-picture-annotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcainmagi%2Fdash-picture-annotation/lists"}