{"id":19140786,"url":"https://github.com/codait/max-vis","last_synced_at":"2025-05-06T23:17:08.361Z","repository":{"id":34984222,"uuid":"194162505","full_name":"CODAIT/max-vis","owner":"CODAIT","description":"Image annotation library and command-line utility for MAX image models","archived":false,"fork":false,"pushed_at":"2022-03-24T04:10:56.000Z","size":1505,"stargazers_count":9,"open_issues_count":6,"forks_count":1,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-05-06T23:17:02.458Z","etag":null,"topics":["machine-learning","max","model-asset-exchange","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CODAIT.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":"2019-06-27T20:59:45.000Z","updated_at":"2023-06-19T00:01:58.000Z","dependencies_parsed_at":"2022-08-08T03:15:39.042Z","dependency_job_id":null,"html_url":"https://github.com/CODAIT/max-vis","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CODAIT%2Fmax-vis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CODAIT%2Fmax-vis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CODAIT%2Fmax-vis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CODAIT%2Fmax-vis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CODAIT","download_url":"https://codeload.github.com/CODAIT/max-vis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782835,"owners_count":21803410,"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":["machine-learning","max","model-asset-exchange","visualization"],"created_at":"2024-11-09T07:18:46.318Z","updated_at":"2025-05-06T23:17:08.331Z","avatar_url":"https://github.com/CODAIT.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# max-vis\n\n`max-vis` is a JavaScript library and command-line utility to help render the predictions returned by some of the deep learning models of the [Model Asset eXchange (MAX)](https://ibm.biz/max-models).\n\nGiven the JSON result (prediction) from one of the MAX image models and the source image, with `max-vis` you can render a new version of the image with predictions (i.e., bounding box, pose lines, etc) annotated on it.\n\n## Install\n\n- browser\n\n   ```javascript\n   \u003cscript src=\"https://cdn.jsdelivr.net/npm/@codait/max-vis\"\u003e\u003c/script\u003e\n   ```\n\n- Node.js\n\n   ```\n   npm install @codait/max-vis\n   ```\n\n- command-line\n\n   ```\n   npm install -g @codait/max-vis\n   ```\n\n## Usage\n\nSee working examples for browser, Node.js, and command-line environments in the [`/examples`](https://github.com/CODAIT/max-vis/tree/master/examples) directory.\n\n- browser\n\n   ```javascript\n   // the prediction (JSON object) returned by a MAX image model\n   const prediction = ... \n\n   // the source image used to get the prediction\n   const image = document.getElementById('myimage')\n\n   // returns a Promise that resolves to a copy of the source image annotated with the prediction\n   maxvis.annotate(prediction, image)\n      .then(annotatedImageBlob =\u003e {\n         // the argument passed is a Blob of a PNG image\n         let img = document.createElement('img')\n         img.src = URL.createObjectURL(annotatedImageBlob)\n         document.body.appendChild(img)\n      })\n   ```\n\n   \u003e **Note**: _When loaded in a browser, the global variable `maxvis` will be available to access the API._\n\n- Node.js\n\n   ```javascript\n   const maxvis = require('@codait/max-vis')\n\n   // the prediction (JSON object) returned by a MAX image model\n   const prediction = ... \n\n   // the source image used to get the prediction\n   const image = 'images/myImage.jpg'\n\n   // returns a Promise that resolves to a copy of the source image annotated with the prediction\n   maxvis.annotate(prediction, image)\n      .then(annotatedImageBuffer =\u003e {\n         // the argument passed is a Buffer of a PNG image\n         fs.writeFile('myAnnotatedImage.png', annotatedImageBuffer, (err) =\u003e {\n            if (err) {\n               console.error(err)\n            }\n         })\n      })\n   ```\n\n- command-line\n\n   Pass prediction directly from a file  \n   ```\n   $ maxvis images/myImage.jpg -p maxImageModelPrediction.json\n   ```  \n\n   or pipe prediction from `curl`  \n   ```\n   $ curl -X POST \"http://max-image-model-endpoint/model/predict\" \\\n   -F \"image=@images/myImage.jpg\" \\\n   | maxvis images/myImage.jpg\n   ```  \n\n   \u003e **Note**: _When installed as a command-line utility, the global command `maxvis` will be available._\n   \n## API\n\n### overlay(_prediction_, _image_, _[options]_)  \n\nProcesses the prediction against the image and renders the prediction (in a `Canvas` overlay) on top of the image. Not applicable when running in Node.js.\n\n`prediction` - (Required) the prediction output from a MAX image model  \n`image` - (Required) an `HTMLImageElement` or the `id` of an `HTMLImageElement`  \n`options` - (Optional) a JSON object of options to customize rendering. See [Options](#API-Options) for more info.  \n\n### annotate(_prediction_, _image_, _[options]_)  \n\nProcesses the prediction against the image and creates a new version of the image that includes the rendered prediction.\n\n`prediction` - (Required) the prediction output from a MAX image model  \n`image` - (Required) an `HTMLImageElement` or `HTMLCanvasElement` or the `id` of an `HTMLImageElement` or `HTMLCanvasElement`.  \n`options` - (Optional) a JSON object of options to customize rendering. See [Options](#API-Options) for more info.  \n\nReturns a Promise that resolves to a `Blob` (in browsers) or `Buffer` (in Node.js) of a PNG image containing the input image annotated with the prediction.\n\n### extract(_prediction_, _image_, _[options]_)  \n\nProcesses the prediction against the image, extracts the components from the image.\n\n`prediction` - (Required) the prediction output from a MAX image model  \n`image` - (Required) an `HTMLImageElement` or `HTMLCanvasElement` or the `id` of an `HTMLImageElement` or `HTMLCanvasElement`.  \n`options` - (Optional) a JSON object of options to customize rendering. See [Options](#API-Options) for more info.  \n\nReturns a Promise that resolves to an array of objects representing each item of the prediction. Each object in the array contains:\n\n- `image`: a `Blob` (in browsers) or `Buffer` (in Node.js) of a PNG image containing the cropped out area of the input image identified in prediction.  \n- `label`: a label for the image  \n\n### version\n\nReturns the `max-vis` version number  \n\n## API Options\n\nAvailable options to pass to the API. All are optional and by default, `max-vis` will try to determine the appropriate values from the prediction object.\n\n| **Option** | **Type** | **Description** |  \n|--|--|--|  \n| `type` | String | The name of type of rendering the prediction conforms to. Acceptable types are `boxes` (for bounding boxes), `lines` (for pose lines), or `segments` (for image segmentation). |  \n| `height` | Number | The height (in pixels) of the image represented by the prediction |  \n| `width` | Number | The width (in pixels) of the image represented by the prediction |  \n| `colors` | 2D array or Object | An array of RGB values to use for rendering (e.g., `[[255,0,200], [125,125,125], ...]`). Alternatively, for bounding boxes an object of label names mapped to preferred RGB values (e.g., `{person: [255,0,200], horse: [125,125,125], ...}`) can be passed. |  \n| `segments` | Array | An array of segmentation IDs to process (e.g., [0, 15]). If not provided, all segments will be processed. This is only applicable for predictions of type `segments`. |  \n| `exclude` | Boolean | Set to `true` if `segments` option indicates segmentation that should be excluded instead of included in processing. Default is `false`. This is only applicable for predictions of type `segments`. |  \n| `lineWidth` | Number | The thickness of the lines in the rendering. Default is 2. This is only applicable for predictions of type `boxes` or `lines`. |  \n\n## CLI Parameters\n\nAvailable parameters to pass to the CLI\n\n| **Parameter** | **Description** |  \n|--|--|  \n| `--type` | Same as `type` API option |\n| `--extract` | Extract and save each component of the prediction from the image instead of saving a single image will all components rendered |\n| `--prediction` | The path to a JSON file containing the prediction returned by a MAX image model |  \n\n## Examples\n\nThe [`/examples`](https://github.com/CODAIT/max-vis/tree/master/examples) directory contains working examples for the browser, Node.js, and command-line environments.\n\n- **annotate bounding boxes**  \n![jockey](images/jockey-annotate.jpg)\n\n- **extract bounding boxes**  \n![jockey](images/jockey-extract.png)\n\n- **annotate segmentation maps**  \n![soccer](images/soccer-annotate.jpg)\n\n- **extract segmentation maps**  \n![soccer](images/soccer-extract.png)\n\n- **annotate pose lines**  \n![pilots](images/pilots-annotate.jpg)\n\n## Links\n\n- [Model Asset eXchange (MAX)](https://ibm.biz/max-models)\n- [Pre-trained Model Asset eXchange (MAX) models for TensorFlow.js](https://github.com/CODAIT/max-tfjs-models)\n- Sample image: [jockey.jpg](https://www.pexels.com/photo/action-athlete-competition-course-158976/)\n- Sample image: [pilots](https://en.wikipedia.org/wiki/Apollo_11#/media/File:Apollo_11_Crew.jpg)\n- Sample image: [soccer.jpg](https://www.pexels.com/photo/action-athletes-ball-blur-274422/)\n\n## License\n\n[Apache-2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodait%2Fmax-vis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodait%2Fmax-vis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodait%2Fmax-vis/lists"}