{"id":13787884,"url":"https://github.com/kyamagu/js-segment-annotator","last_synced_at":"2025-05-12T02:30:38.444Z","repository":{"id":12078648,"uuid":"14666147","full_name":"kyamagu/js-segment-annotator","owner":"kyamagu","description":"Javascript image annotation tool based on image segmentation.","archived":true,"fork":false,"pushed_at":"2019-03-11T01:22:04.000Z","size":428,"stargazers_count":525,"open_issues_count":9,"forks_count":160,"subscribers_count":40,"default_branch":"master","last_synced_at":"2024-11-18T01:39:19.196Z","etag":null,"topics":["image-segmentation","javascript","javascript-image-annotation"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"hekigan/is-loading","license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyamagu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-24T18:04:48.000Z","updated_at":"2024-10-30T05:08:21.000Z","dependencies_parsed_at":"2022-09-03T14:30:29.908Z","dependency_job_id":null,"html_url":"https://github.com/kyamagu/js-segment-annotator","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyamagu%2Fjs-segment-annotator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyamagu%2Fjs-segment-annotator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyamagu%2Fjs-segment-annotator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyamagu%2Fjs-segment-annotator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyamagu","download_url":"https://codeload.github.com/kyamagu/js-segment-annotator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253662535,"owners_count":21944091,"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","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":["image-segmentation","javascript","javascript-image-annotation"],"created_at":"2024-08-03T21:00:32.827Z","updated_at":"2025-05-12T02:30:38.009Z","avatar_url":"https://github.com/kyamagu.png","language":"JavaScript","readme":"JS Segment Annotator\n====================\n\nJavascript image annotation tool based on image segmentation.\n\n * Label image regions with mouse.\n * Written in vanilla Javascript, with require.js dependency (packaged).\n * Pure client-side implementation of image segmentation.\n\nA browser must support HTML canvas to use this tool.\n\nThere is an [online demo](http://kyamagu.github.io/js-segment-annotator/?view=index).\n\nImporting data\n--------------\n\nPrepare a JSON file that looks like the following. The required fields are\n`labels` and `imageURLs`. The `annotationURLs` are for existing data and can\nbe omitted. Place the JSON file inside the `data/` directory.\n\n    {\n      \"labels\": [\n        \"background\",\n        \"skin\",\n        \"hair\",\n        \"dress\",\n        \"glasses\",\n        \"jacket\",\n        \"skirt\"\n      ],\n      \"imageURLs\": [\n        \"data/images/1.jpg\",\n        \"data/images/2.jpg\"\n      ],\n      \"annotationURLs\": [\n        \"data/annotations/1.png\",\n        \"data/annotations/2.png\"\n      ]\n    }\n\nThen edit `main.js` to point to this JSON file. Open a Web browser and visit\n`index.html`.\n\nKnown issues\n-----------\n\n_Browser incompatibility_\n\nA segmentation result can greatly differ due to the difference in Javascript\nimplementation across Web browsers. The difference stems from numerical\nprecision of floating point numbers, and there is no easy way to produce the\nexact same result across browsers.\n\n\nPython tips\n-----------\n\n_Annotation PNG_\n\nThe annotation PNG file contains label map encoded in RGB value. Do the\nfollowing to encode an index map.\n\n```python\nimport numpy as np\nfrom PIL import Image\n\n# Decode\nencoded = np.array(Image.open('data/annotations/1.png'))\nannotation = np.bitwise_or(np.bitwise_or(\n    encoded[:, :, 0].astype(np.uint32),\n    encoded[:, :, 1].astype(np.uint32) \u003c\u003c 8),\n    encoded[:, :, 2].astype(np.uint32) \u003c\u003c 16)\n\nprint(np.unique(annotation))\n\n# Encode\nImage.fromarray(np.stack([\n    np.bitwise_and(annotation, 255),\n    np.bitwise_and(annotation \u003e\u003e 8, 255),\n    np.bitwise_and(annotation \u003e\u003e 16, 255),\n    ], axis=2).astype(np.uint8)).save('encoded.png')\n```\n\n_JSON_\n\nUse JSON module.\n\n```python\nimport json\n\nwith open('data/example.json', 'r') as f:\n    dataset = json.load(f)\n```\n\n_Using dataURL_\n\nDo the following to convert between dataURL and NumPy format.\n\n```python\nfrom PIL import Image\nimport base64\nimport io\n\n# Encode\nwith io.BytesIO() as buffer:\n    encoded.save(buffer, format='png')\n    data_url = b'data:image/png;base64,' + base64.b64encode(buffer.getvalue())\n\n# Decode\nbinary = base64.b64decode(data_url.replace(b'data:image/png;base64,', b''))\nencoded = Image.open(io.BytesIO(binary))\n```\n\n\nMatlab tips\n-----------\n\n_Annotation PNG_\n\nThe annotation PNG file contains label map encoded in RGB value. Do the\nfollowing to encode an index map.\n\n```matlab\n% Decode\n\nX = imread('data/annotations/0.png');\nannotation = X(:, :, 1);\nannotation = bitor(annotation, bitshift(X(:, :, 2), 8));\nannotation = bitor(annotation, bitshift(X(:, :, 3), 16));\n\n% Encode\n\nX = cat(3, bitand(annotation, 255), ...\n           bitand(bitshift(annotation, -8), 255), ...\n           bitand(bitshift(annotation, -16)), 255));\nimwrite(uint8(X), 'data/annotations/0.png');\n```\n\n_JSON_\n\nUse the `matlab-json` package.\n\n * https://github.com/kyamagu/matlab-json\n\n_Using dataURL_\n\nGet the byte encoding tools.\n\n * https://www.mathworks.com/matlabcentral/fileexchange/39526-byte-encoding-utilities\n\nDo the following to convert between dataURL and Matlab format.\n\n```matlab\n% Decode\n\ndataURL = 'data:image/png;base64,...';\npng_data = base64decode(strrep(dataURL, 'data:image/png;base64,', ''));\nannotation = imdecode(png_data, 'png');\n\n% Encode\n\npng_data = imencode(annotation, 'png');\ndataURL = ['data:image/png;base64,', base64encode(png_data)];\n```\n\nCitation\n--------\n\nWe appreciate if you cite the following article in an academic paper. The tool was originally developed for this work.\n\n```\n@article{tangseng2017looking,\nAuthor        = {Pongsate Tangseng and Zhipeng Wu and Kota Yamaguchi},\nTitle         = {Looking at Outfit to Parse Clothing},\nEprint        = {1703.01386v1},\nArchivePrefix = {arXiv},\nPrimaryClass  = {cs.CV},\nYear          = {2017},\nMonth         = {Mar},\nUrl           = {http://arxiv.org/abs/1703.01386v1}\n}\n```\n","funding_links":[],"categories":["Labeling Tools"],"sub_categories":["Images"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyamagu%2Fjs-segment-annotator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyamagu%2Fjs-segment-annotator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyamagu%2Fjs-segment-annotator/lists"}