Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thekevinscott/ml-classifier-ui
A UI tool for quickly training image classifiers in the browser
https://github.com/thekevinscott/ml-classifier-ui
image-classification image-classifier machine-learning machinelearning tensorflow tensorflow-examples tensorflow-experiments tensorflow-tutorials tensorflowjs
Last synced: about 12 hours ago
JSON representation
A UI tool for quickly training image classifiers in the browser
- Host: GitHub
- URL: https://github.com/thekevinscott/ml-classifier-ui
- Owner: thekevinscott
- License: mit
- Created: 2018-07-04T20:16:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T23:58:49.000Z (almost 2 years ago)
- Last Synced: 2025-01-13T21:08:07.573Z (8 days ago)
- Topics: image-classification, image-classifier, machine-learning, machinelearning, tensorflow, tensorflow-examples, tensorflow-experiments, tensorflow-tutorials, tensorflowjs
- Language: TypeScript
- Homepage: https://thekevinscott.github.io/ml-classifier-ui/
- Size: 24.9 MB
- Stars: 246
- Watchers: 10
- Forks: 23
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ML Classifier UI
ML 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.
This package is the UI front end for [`ml-classifier`](https://github.com/thekevinscott/ml-classifier).
## Walkthrough
A walkthrough of the code can be found in the article [Image Classification in the Browser with Javascript](https://thekevinscott.com/image-classification-with-javascript/).
## Demo
An interactive [demo can be found here](https://thekevinscott.github.io/ml-classifier-ui/).
*Screenshot of demo*
## Getting Started
### Installation
`ml-classifier-ui` can be installed via `yarn` or `npm`:
```
yarn add ml-classifier-ui
```
or
```
npm install ml-classifier-ui
```
### Quick Start (Code Sandbox)
You can fork a live running version at [codesandbox.io](https://codesandbox.io/s/218po5mzxn).
### Quick Start (Running locally)
Start by instantiating a new MLClassifierUI.
```
import React from 'react';
import ReactDOM from 'react-dom';
import MLClassifierUI from 'ml-classifier-ui';
ReactDOM.render(, document.getElementById('root'));
```
## API Documentation
`MLClassifierUI` accepts a number of parameters:
* **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).
* **methodParams** (`Object`) *Optional* - A set of parameters that will be passed in calls to `ml-classifier`'s methods. See below for more information.
* **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.
* **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.
* **showDownload** (`boolean`) *Optional* - A flag denoting whether to show a download button or not. Defaults to true.
`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).
### `getMLClassifier`
`getMLClassifier` returns an instance of `ml-classifier` for programmatic access to the underlying methods.
#### Example
```
{
mlClassifier.addData(...);
}}
/>
```
### `methodParams`
`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.
Accepted keys are `train`, `evaluate`, and `save`. Other keys will be ignored.
#### Example
```
```
### `uploadFormat`
`uploadFormat` corresponds to how uploaded images should be organized. There are two options:
#### `nested`
Expects images to be organized in folders matching the label. Only the immediate parent folder's name will be used as the label. For example:
```
- containing-folder/
- dogs/
- IMG-1.jpg
- IMG-2.jpg
- IMG-3.jpg
- cats/
- IMG-1.jpg
- IMG-2.jpg
- IMG-3.jpg
```
Will product an array of three `dogs` labels and three `cats` labels.
Nested 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.
#### `flat` (*currently in development*)
Expects files' names to be the label. Nested folders will be searched recursively (if the browser supports it) to build a flat array of files.
```
- folder/
- dog-1.jpg
- dog-2.jpg
- dog-3.jpg
- cat-1.jpg
- cat-2.jpg
- cat-3.jpg
```
#### Example
```
```
### `imageFormats` (*currently in development*)
`imageFormats` denotes the list of acceptable image formats for upload. Any images not matching the list of acceptable formats will be ignored.
#### Example
```
```
## Contributing
Contributions are welcome!
You can run the local example with:
```
yarn watch
```
`ml-classifier-ui` is written in Typescript and React.
### Tests
Tests are a work in progress. Currently, the test suite only consists of unit tests. Pull requests for additional tests are welcome!
Run tests with:
```
yarn test
```
## Author
* [Kevin Scott](https://thekevinscott.com)
## License
This project is licensed under the MIT License - see the LICENSE file for details
