{"id":34641204,"url":"https://github.com/ml5js/ml5-extra-imagesegmentation","last_synced_at":"2026-05-26T22:07:59.192Z","repository":{"id":253924549,"uuid":"844937963","full_name":"ml5js/ml5-extra-imagesegmentation","owner":"ml5js","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-10T13:44:00.000Z","size":402,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-26T00:46:36.475Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ml5js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-20T09:06:25.000Z","updated_at":"2024-10-10T13:44:03.000Z","dependencies_parsed_at":"2024-08-20T11:30:37.109Z","dependency_job_id":"477a5f2b-04d8-46d0-b992-ce1c04544d3b","html_url":"https://github.com/ml5js/ml5-extra-imagesegmentation","commit_stats":null,"previous_names":["ml5js/ml5-extra-imagesegmentation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ml5js/ml5-extra-imagesegmentation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml5js%2Fml5-extra-imagesegmentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml5js%2Fml5-extra-imagesegmentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml5js%2Fml5-extra-imagesegmentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml5js%2Fml5-extra-imagesegmentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ml5js","download_url":"https://codeload.github.com/ml5js/ml5-extra-imagesegmentation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml5js%2Fml5-extra-imagesegmentation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33540820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"ssl_error","status_checked_at":"2026-05-26T15:22:15.568Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-12-24T17:18:02.877Z","updated_at":"2026-05-26T22:07:59.184Z","avatar_url":"https://github.com/ml5js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## ml5-extra-imagesegmentation\n\nThis is an experiment in incorporating [transformers.js](https://xenova.github.io/transformers.js/) into [ml5.js](https://github.com/ml5js) for use with [p5.js](https://github.com/processing/p5.js). Done by [@gohai](https://github.com/gohai), [@chanel1130](https://github.com/chanel1130), [@Lisa-HuangZijin](https://github.com/Lisa-HuangZijin) and [@Ricci-Liu](https://github.com/Ricci-Liu) in Summer of 2024.\n\nWe're making use of the [detr-resnet-50-panoptic](https://huggingface.co/Xenova/detr-resnet-50-panoptic) image segmentation model here, which we found to provide acceptable performance in the browser (albeit not quite fast enough to run it continuously from a webcam).\n\n### Examples\n\n* [Basic](https://editor.p5js.org/gohai/sketches/O2GfdTOEL)\n* [Webcam Collage](https://editor.p5js.org/gohai/sketches/Rj4yMiY59) by Chanel\n* [Webcam Drag \u0026 Drop Storytelling](https://editor.p5js.org/gohai/sketches/kmWX0BWG7) by Lisa\n* [Webcam Grid Storytelling](https://editor.p5js.org/gohai/sketches/DHXNvA4Ix) by Lisa\n* [Webcam Parallax](https://editor.p5js.org/gohai/sketches/KoI-eYYkW) by Ruiqi\n\n\n### Usage\n\nIn the head section of your `index.html`, add this line *after* the line that loads ml5.js:\n\n```\n\u003cscript src=\"https://unpkg.com/ml5-extra-imagesegmentation@0.1/src/ml5-extra-imagesegmentation.js\"\u003e\u003c/script\u003e\n\n````\n\nLoad the image segmenter like so:\n\n```\nlet segmentation;\n\nfunction preload() {\n  segmentation = ml5.imageSegmentation({ feature_extractor_size: 256 });\n}\n```\n\nOmitting the `feature_extractor_size` option will improve the accuracy over speed.\n\nTo start a detection, pass an image or video to the `detect()` method, together with the name of a callback function.\n\n```\nsegmentation.detect(img, gotResults);\n```\n\nOnce the segmentation has finished, the callback function is called with an array of segments as argument.\n\n```\nfunction gotResults(results) {\n  for (let i=0; i \u003c results.length; i++) {\n    result = results[i];\n    console.log(result);\n  }\n}\n```\n\nEach result has the following properties: `label`, `score` as well as a `mask` image. The `mask` is ready to be used with p5's [mask()](https://p5js.org/reference/p5.Image/mask/#:~:text=mask()%20uses%20another%20p5,the%20mask%20will%20be%20scaled.) method.\n\n\n### Acknowledgements\n\nMany thanks to [@xenova](https://github.com/xenova) - first and foremost for transformers.js, but also for kindly providing feedback during the research for this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml5js%2Fml5-extra-imagesegmentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fml5js%2Fml5-extra-imagesegmentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml5js%2Fml5-extra-imagesegmentation/lists"}