├── style.css ├── 10_whole_foods_model_v0.tflite ├── README.md ├── LICENSE ├── index.html ├── .gitignore └── script.js /style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10_whole_foods_model_v0.tflite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrdbourke/twitch-ml-deploy/HEAD/10_whole_foods_model_v0.tflite -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # twitch-ml-deploy 2 | Deploying a ML model in the browser using TensorFlow JS 3 | 4 | Model works for identifying food classes: 5 | 6 | ```python 7 | ['apple', 8 | 'banana', 9 | 'beef', 10 | 'blueberries', 11 | 'carrots', 12 | 'chicken_wings', 13 | 'egg', 14 | 'honey', 15 | 'mushrooms', 16 | 'strawberries'] 17 | ``` 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Daniel Bourke 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello World - TensorFlow.js 8 | 9 | 10 | 11 | 12 |

TensorFlow.js Testing

13 | 14 |

The line below will say loaded if TensorFlow.js is loaded:

15 |

Awaiting TF.js load

16 |

The line below will say loaded if TFLite model loaded:

17 |

Awaiting TF.js model/TFLite model loading

18 | 19 | 20 |

Upload Image

21 |

22 |

23 | 24 |

Predicted class:

25 |

26 |

Predicted probability:

27 |

28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | build/ 12 | develop-eggs/ 13 | dist/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | pip-wheel-metadata/ 24 | share/python-wheels/ 25 | *.egg-info/ 26 | .installed.cfg 27 | *.egg 28 | MANIFEST 29 | 30 | # PyInstaller 31 | # Usually these files are written by a python script from a template 32 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 33 | *.manifest 34 | *.spec 35 | 36 | # Installer logs 37 | pip-log.txt 38 | pip-delete-this-directory.txt 39 | 40 | # Unit test / coverage reports 41 | htmlcov/ 42 | .tox/ 43 | .nox/ 44 | .coverage 45 | .coverage.* 46 | .cache 47 | nosetests.xml 48 | coverage.xml 49 | *.cover 50 | *.py,cover 51 | .hypothesis/ 52 | .pytest_cache/ 53 | 54 | # Translations 55 | *.mo 56 | *.pot 57 | 58 | # Django stuff: 59 | *.log 60 | local_settings.py 61 | db.sqlite3 62 | db.sqlite3-journal 63 | 64 | # Flask stuff: 65 | instance/ 66 | .webassets-cache 67 | 68 | # Scrapy stuff: 69 | .scrapy 70 | 71 | # Sphinx documentation 72 | docs/_build/ 73 | 74 | # PyBuilder 75 | target/ 76 | 77 | # Jupyter Notebook 78 | .ipynb_checkpoints 79 | 80 | # IPython 81 | profile_default/ 82 | ipython_config.py 83 | 84 | # pyenv 85 | .python-version 86 | 87 | # pipenv 88 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 89 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 90 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 91 | # install all needed dependencies. 92 | #Pipfile.lock 93 | 94 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow 95 | __pypackages__/ 96 | 97 | # Celery stuff 98 | celerybeat-schedule 99 | celerybeat.pid 100 | 101 | # SageMath parsed files 102 | *.sage.py 103 | 104 | # Environments 105 | .env 106 | .venv 107 | env/ 108 | venv/ 109 | ENV/ 110 | env.bak/ 111 | venv.bak/ 112 | 113 | # Spyder project settings 114 | .spyderproject 115 | .spyproject 116 | 117 | # Rope project settings 118 | .ropeproject 119 | 120 | # mkdocs documentation 121 | /site 122 | 123 | # mypy 124 | .mypy_cache/ 125 | .dmypy.json 126 | dmypy.json 127 | 128 | # Pyre type checker 129 | .pyre/ 130 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const classes = { 2 | 0: 'apple', 3 | 1: 'banana', 4 | 2: 'beef', 5 | 3: 'blueberries', 6 | 4: 'carrots', 7 | 5: 'chicken_wings', 8 | 6: 'egg', 9 | 7: 'honey', 10 | 8: 'mushrooms', 11 | 9: 'strawberries' 12 | }; 13 | 14 | // Check to see if TF.js is available 15 | const tfjs_status = document.getElementById("tfjs_status"); 16 | 17 | if (tfjs_status) { 18 | tfjs_status.innerText = "Loaded TensorFlow.js - version:" + tf.version.tfjs; 19 | } 20 | 21 | 22 | // Model loading 23 | let model; // This is in global scope 24 | 25 | const loadModel = async () => { 26 | try { 27 | const tfliteModel = await tflite.loadTFLiteModel( 28 | "https://storage.googleapis.com/food-vision-models-test/10_whole_foods_model_v0.tflite" 29 | // "code/twitch-ml-deploy/10_whole_foods_model_v0.tflite" 30 | ); 31 | model = tfliteModel; // assigning it to the global scope model as tfliteModel can only be used within this scope 32 | // console.log(tfliteModel); 33 | 34 | // Check if model loaded 35 | if (tfliteModel) { 36 | model_status.innerText = "Model loaded"; 37 | } 38 | } catch (error) { 39 | console.log(error); 40 | } 41 | }; 42 | 43 | loadModel(); 44 | 45 | // Function to classify image 46 | function classifyImage(model, image) { 47 | // Preprocess image 48 | image = tf.image.resizeBilinear(image, [224, 224]); // image size needs to be same as model inputs 49 | image = tf.expandDims(image); 50 | 51 | // console.log(tflite.getDTypeFromTFLiteType("uint8")); // Gives int32 as output thus we cast int32 in below line 52 | image = tf.cast(image, "int32"); // Model requires uint8 53 | const output = model.predict(image); 54 | const output_values = tf.softmax(output.arraySync()[0]); 55 | console.log(output.arraySync()); 56 | console.log(output.arraySync()[0]); // arraySync() Returns an array to use 57 | 58 | // Update HTML 59 | predicted_class.innerText = classes[output_values.argMax().arraySync()]; 60 | predicted_prob.innerText = output_values.max().arraySync() * 100 + "%"; 61 | } 62 | 63 | 64 | // Image uploading 65 | const fileInput = document.getElementById("file-input"); 66 | const image = document.getElementById("image"); 67 | 68 | function getImage() { 69 | if (!fileInput.files[0]) throw new Error("Image not found"); 70 | const file = fileInput.files[0]; 71 | 72 | // Get the data url from the image 73 | const reader = new FileReader(); 74 | 75 | // When reader is ready display image 76 | reader.onload = function (event) { 77 | // Get data URL 78 | const dataUrl = event.target.result; 79 | 80 | // Create image object 81 | const imageElement = new Image(); 82 | imageElement.src = dataUrl; 83 | 84 | // When image object loaded 85 | imageElement.onload = function () { 86 | // Display image 87 | image.setAttribute("src", this.src); 88 | 89 | // Log image parameters 90 | const currImage = tf.browser.fromPixels(imageElement); 91 | 92 | // Classify image 93 | classifyImage(model, currImage); 94 | }; 95 | 96 | document.body.classList.add("image-loaded"); 97 | }; 98 | 99 | // Get data url 100 | reader.readAsDataURL(file); 101 | } 102 | 103 | // Add listener to see if someone uploads an image 104 | fileInput.addEventListener("change", getImage); --------------------------------------------------------------------------------