{"id":13738721,"url":"https://github.com/thekevinscott/ml-classifier-ui","last_synced_at":"2025-04-07T06:05:18.787Z","repository":{"id":37549715,"uuid":"139762864","full_name":"thekevinscott/ml-classifier-ui","owner":"thekevinscott","description":"A UI tool for quickly training image classifiers in the browser","archived":false,"fork":false,"pushed_at":"2023-01-25T23:58:49.000Z","size":26160,"stargazers_count":246,"open_issues_count":42,"forks_count":23,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-31T05:06:04.854Z","etag":null,"topics":["image-classification","image-classifier","machine-learning","machinelearning","tensorflow","tensorflow-examples","tensorflow-experiments","tensorflow-tutorials","tensorflowjs"],"latest_commit_sha":null,"homepage":"https://thekevinscott.github.io/ml-classifier-ui/","language":"TypeScript","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/thekevinscott.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":"2018-07-04T20:16:42.000Z","updated_at":"2024-11-26T13:50:45.000Z","dependencies_parsed_at":"2023-01-26T08:30:16.655Z","dependency_job_id":null,"html_url":"https://github.com/thekevinscott/ml-classifier-ui","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/thekevinscott%2Fml-classifier-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thekevinscott%2Fml-classifier-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thekevinscott%2Fml-classifier-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thekevinscott%2Fml-classifier-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thekevinscott","download_url":"https://codeload.github.com/thekevinscott/ml-classifier-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601447,"owners_count":20964864,"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-classification","image-classifier","machine-learning","machinelearning","tensorflow","tensorflow-examples","tensorflow-experiments","tensorflow-tutorials","tensorflowjs"],"created_at":"2024-08-03T03:02:34.773Z","updated_at":"2025-04-07T06:05:18.769Z","avatar_url":"https://github.com/thekevinscott.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ML Classifier UI\n\nML Classifier is a React front end for a machine learning engine for quickly training image classification models in your browser. Models can be saved with a single command, and the resulting models reused to make image classification predictions.\n\nThis package is the UI front end for [`ml-classifier`](https://github.com/thekevinscott/ml-classifier).\n\n## Walkthrough\n\nA walkthrough of the code can be found in the article [Image Classification in the Browser with Javascript](https://thekevinscott.com/image-classification-with-javascript/).\n\n## Demo\n\nAn interactive [demo can be found here](https://thekevinscott.github.io/ml-classifier-ui/).\n\n![Demo](https://github.com/thekevinscott/ml-classifier-ui/raw/master/example/public/example.gif)\n*Screenshot of demo*\n\n## Getting Started\n\n### Installation\n\n`ml-classifier-ui` can be installed via `yarn` or `npm`:\n\n```\nyarn add ml-classifier-ui\n```\n\nor\n\n```\nnpm install ml-classifier-ui\n```\n\n### Quick Start (Code Sandbox)\n\nYou can fork a live running version at [codesandbox.io](https://codesandbox.io/s/218po5mzxn).\n\n### Quick Start (Running locally)\n\nStart by instantiating a new MLClassifierUI.\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport MLClassifierUI from 'ml-classifier-ui';\n\nReactDOM.render(\u003cMLClassifierUI /\u003e, document.getElementById('root'));\n```\n\n## API Documentation\n\n`MLClassifierUI` accepts a number of parameters:\n\n* **getMLClassifier** (`Function`) *Optional* - A callback that returns an instance of the underlying `ml-classifier` object. Call this if you want to programmatically call methods like `addData`, `train`, and `predict`. For more information on `ml-classifier`'s API methods [refer to it's documentation](https://github.com/thekevinscott/ml-classifier#api-documentation).\n* **methodParams** (`Object`) *Optional* - A set of parameters that will be passed in calls to `ml-classifier`'s methods. See below for more information.\n* **uploadFormat** (`string`) *Optional* - A string denoting what type of upload format to accept. Formats can be `flat` or `nested`. See below note for more information on that. If omitted, all formats are accepted.\n* **imageFormats** (`string[]`) *Optional* - An array of file extensions to accept. By default, all valid images are accepted. Images are transformed via the native `Image` tag in the browser, so if the browser can display the image, it'll be processed.\n* **showDownload** (`boolean`) *Optional* - A flag denoting whether to show a download button or not. Defaults to true.\n\n`MLClassifierUI` also accepts a number of callbacks that are called on the beginnings and ends of `ml-classifier` functions. [You can view a list of those here](https://github.com/thekevinscott/ml-classifier#parameters).\n\n### `getMLClassifier`\n\n`getMLClassifier` returns an instance of `ml-classifier` for programmatic access to the underlying methods.\n\n#### Example\n\n```\n\u003cMLClassifierUI\n  getMLClassifier={(mlClassifier) =\u003e {\n    mlClassifier.addData(...);\n  }}\n/\u003e\n```\n\n### `methodParams`\n\n`methodParams` can be used to pass method-specific parameters to `ml-classifier`. The key will be used to determine which method to pass parameters to.\n\nAccepted keys are `train`, `evaluate`, and `save`. Other keys will be ignored.\n\n#### Example\n\n```\n\u003cMLClassifierUI\n  methodParams={{\n    train: {\n      epochs: 20,\n    },\n    evaluate: {\n      batchSize: 32,\n    },\n    save: {\n    },\n  }}\n/\u003e\n```\n\n### `uploadFormat`\n\n`uploadFormat` corresponds to how uploaded images should be organized. There are two options:\n\n#### `nested`\nExpects images to be organized in folders matching the label. Only the immediate parent folder's name will be used as the label. For example:\n\n```\n- containing-folder/\n  - dogs/\n    - IMG-1.jpg\n    - IMG-2.jpg\n    - IMG-3.jpg\n  - cats/\n    - IMG-1.jpg\n    - IMG-2.jpg\n    - IMG-3.jpg\n```\n\nWill product an array of three `dogs` labels and three `cats` labels.\n\nNested folders will be searched recursively, but only immediate parent folders' names will be used. If an invalidly nested structure is found an error will be thrown.\n\n#### `flat` (*currently in development*)\nExpects files' names to be the label. Nested folders will be searched recursively (if the browser supports it) to build a flat array of files.\n\n```\n- folder/\n  - dog-1.jpg\n  - dog-2.jpg\n  - dog-3.jpg\n  - cat-1.jpg\n  - cat-2.jpg\n  - cat-3.jpg\n```\n\n#### Example\n\n```\n\u003cMLClassifierUI\n  uploadFormat={\"nested\"}\n/\u003e\n```\n\n### `imageFormats` (*currently in development*)\n\n`imageFormats` denotes the list of acceptable image formats for upload. Any images not matching the list of acceptable formats will be ignored.\n\n#### Example\n\n```\n\u003cMLClassifierUI\n  imageFormats={[\n    'png',\n    'gif',\n  ]}\n/\u003e\n```\n\n## Contributing\n\nContributions are welcome!\n\nYou can run the local example with:\n\n```\nyarn watch\n```\n\n`ml-classifier-ui` is written in Typescript and React.\n\n### Tests\n\nTests are a work in progress. Currently, the test suite only consists of unit tests. Pull requests for additional tests are welcome!\n\nRun tests with:\n\n```\nyarn test\n```\n\n## Author\n\n* [Kevin Scott](https://thekevinscott.com)\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details\n\n![](https://ga-beacon.appspot.com/UA-112845439-4/ml-classifier-ui/readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekevinscott%2Fml-classifier-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthekevinscott%2Fml-classifier-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekevinscott%2Fml-classifier-ui/lists"}