Node.js and npm installed on your machine<\/li>\n<\/ul>\nSetting Up the Project<\/h2>\n
To begin, let’s set up a new project with TensorFlow.js and create a basic HTML file.<\/p>\n
Step 1: Create a New Project Directory<\/h3>\n
Open your terminal and create a new directory for your project.<\/p>\n
mkdir tfjs-image-classification\n<\/code><\/pre>\nNavigate into the project directory.<\/p>\n
cd tfjs-image-classification\n<\/code><\/pre>\nStep 2: Initialize a New Node.js Project<\/h3>\n
Next, let’s initialize a new Node.js project in the project directory.<\/p>\n
npm init -y\n<\/code><\/pre>\nThis will create a package.json<\/code> file with default values.<\/p>\nStep 3: Install TensorFlow.js<\/h3>\n
Install TensorFlow.js as a project dependency.<\/p>\n
npm install @tensorflow\/tfjs @tensorflow-models\/mobilenet\n<\/code><\/pre>\nThis will install TensorFlow.js and the MobileNet image classification model.<\/p>\n
Step 4: Create the HTML File<\/h3>\n
Create a new file called index.html<\/code> in the project directory and add the following code:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <title>Image Classification with TensorFlow.js<\/title>\n <\/head>\n <body>\n <input type=\"file\" id=\"image-selector\" accept=\"image\/*\" \/>\n <button id=\"predict-button\">Predict<\/button>\n <div id=\"prediction-container\"><\/div>\n\n <script src=\"index.js\"><\/script>\n <\/body>\n<\/html>\n<\/code><\/pre>\nThis HTML file includes an input element for selecting an image, a predict button, and a container for displaying the predictions. We also included a JavaScript file called index.js<\/code> that we will create in the next step.<\/p>\nStep 5: Create the JavaScript File<\/h3>\n
Create a new file called index.js<\/code> in the project directory and add the following code:<\/p>\n\/\/ Code goes here\n<\/code><\/pre>\nWe will now write the JavaScript code to load the MobileNet model, make predictions, and display the results.<\/p>\n
Writing the JavaScript Code<\/h2>\n
Let’s start writing the JavaScript code in index.js<\/code>.<\/p>\nLoading the MobileNet Model<\/h3>\n
To use the MobileNet model for image classification, we need to load it first. Add the following code inside the index.js<\/code> file:<\/p>\nlet model;\n\nasync function loadModel() {\n model = await tf.loadGraphModel('https:\/\/tfhub.dev\/google\/tfjs-model\/imagenet\/mobilenet_v2_100_224\/feature_vector\/4\/default\/1', {\n fromTFHub: true\n });\n\n console.log('Model loaded');\n\n \/\/ Enable predict button\n document.querySelector('#predict-button').disabled = false;\n}\n\nloadModel();\n<\/code><\/pre>\nThis code defines the loadModel<\/code> function, which loads the MobileNet model using tf.loadGraphModel<\/code> function from TensorFlow.js. We pass the URL of the model and set fromTFHub<\/code> option to true<\/code> to load the model from TensorFlow Hub. Once the model is loaded, we log a message to the console and enable the predict button.<\/p>\nPreprocessing the Image<\/h3>\n
Before we can make predictions with the loaded model, we need to preprocess the selected image. Add the following code after the loadModel<\/code> function:<\/p>\nlet inputImage;\n\nfunction preprocessImage(image) {\n \/\/ Resize the image to 224x224\n const resizedImage = tf.image.resizeBilinear(image, [224, 224]);\n\n \/\/ Normalize the pixels\n const mean = tf.tensor1d([123.68, 116.779, 103.939]);\n const normalizedImage = resizedImage.sub(mean);\n\n \/\/ Expand the dimensions for the model input\n inputImage = normalizedImage.expandDims(0);\n\n return inputImage;\n}\n<\/code><\/pre>\nThis code defines the preprocessImage<\/code> function, which takes an image tensor as input and applies the necessary preprocessing steps. We resize the image to 224x224<\/code> pixels, normalize the pixel values using the mean values [123.68, 116.779, 103.939]<\/code>, and expand the dimensions to match the input shape of the model.<\/p>\nMaking Predictions<\/h3>\n
Next, let’s write the code to make predictions using the loaded model. Add the following code after the preprocessImage<\/code> function:<\/p>\nasync function predict() {\n const imageSelector = document.getElementById('image-selector');\n const image = imageSelector.files[0];\n\n const reader = new FileReader();\n\n reader.onload = async function(event) {\n const imageElement = document.createElement('img');\n imageElement.src = event.target.result;\n document.body.appendChild(imageElement);\n\n await tf.nextFrame();\n\n const imageData = tf.browser.fromPixels(imageElement);\n const preprocessedImage = preprocessImage(imageData);\n\n const predictions = await model.predict(preprocessedImage);\n\n \/\/ Display top 5 predictions\n const topPredictions = Array.from(predictions.dataSync())\n .map((prediction, index) => ({\n probability: prediction,\n className: IMAGENET_CLASSES[index]\n }))\n .sort((a, b) => b.probability - a.probability)\n .slice(0, 5);\n\n const predictionContainer = document.getElementById('prediction-container');\n predictionContainer.innerHTML = '';\n\n topPredictions.forEach(({ className, probability }) => {\n const row = document.createElement('div');\n row.innerHTML = `${className}: ${(probability * 100).toFixed(2)}%`;\n predictionContainer.appendChild(row);\n });\n };\n\n reader.readAsDataURL(image);\n}\n\nconst predictButton = document.getElementById('predict-button');\npredictButton.addEventListener('click', predict);\n<\/code><\/pre>\nThis code defines the predict<\/code> function, which is called when the predict button is clicked. Inside the predict<\/code> function, we get the selected image from the input element, read the image using FileReader<\/code>, and create an img<\/code> element to display the selected image on the page.<\/p>\nAfter that, we preprocess the image using the preprocessImage<\/code> function we defined earlier. We then make predictions using the model’s predict<\/code> function on the preprocessed image. The predictions are an array of probabilities for each class in the ImageNet dataset.<\/p>\nFinally, we display the top 5 predictions with the highest probabilities in the prediction-container<\/code> div on the webpage.<\/p>\nAdding the ImageNet Classes<\/h3>\n
To display the class names alongside the predictions, we need to define the class names for the ImageNet dataset. Add the following code above the loadModel<\/code> function:<\/p>\nconst IMAGENET_CLASSES = [\n 'tench',\n 'goldfish',\n 'great_white_shark',\n \/\/ ...\n \/\/ List of 1000 class names\n \/\/ ...\n];\n<\/code><\/pre>\nReplace the comment with the complete list of 1000 class names from the ImageNet dataset. You can find the complete list of class names in the TensorFlow.js repository.<\/p>\n
Testing the Classification Model<\/h2>\n
Now that our project is set up and the JavaScript code is written, it’s time to test the image classification model.<\/p>\n
To run the project, open your terminal and navigate to the project directory. Then, run the following command:<\/p>\n
npm start\n<\/code><\/pre>\nThis will start a local server and display a URL. Open the URL in your web browser to see the webpage.<\/p>\n
\n- Click on the “Choose File” button to select an image from your local machine.<\/li>\n
- Click the “Predict” button to make predictions based on the selected image.<\/li>\n
- The top 5 predictions with their respective probabilities will be displayed on the webpage.<\/li>\n<\/ol>\n
Congratulations! You have successfully built an image classification model using TensorFlow.js.<\/p>\n
Conclusion<\/h2>\n
In this tutorial, we learned how to use TensorFlow.js for image classification. We set up a project with TensorFlow.js, loaded the MobileNet model, preprocessed the image, and made predictions using the model. TensorFlow.js makes it easy to run machine learning models in the browser using JavaScript, opening up new possibilities for creating interactive machine learning applications.<\/p>\n","protected":false},"excerpt":{"rendered":"
Image classification is a common task in machine learning where we train a model to classify images into different categories or labels. TensorFlow.js is a powerful library that allows us to run machine learning models directly in the browser using JavaScript. In this tutorial, we will learn how to use Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[39,325,768,41,328,49,1882],"yoast_head":"\nHow to Use TensorFlow.js for Image Classification - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use TensorFlow.js for Image Classification\" \/>\n<meta property=\"og:description\" content=\"Image classification is a common task in machine learning where we train a model to classify images into different categories or labels. TensorFlow.js is a powerful library that allows us to run machine learning models directly in the browser using JavaScript. In this tutorial, we will learn how to use Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:55+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"How to Use TensorFlow.js for Image Classification\",\n\t \"datePublished\": \"2023-11-04T23:14:10+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:55+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\"\n\t },\n\t \"wordCount\": 791,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"Artificial Intelligence\\\"\",\n\t \"\\\"Data Science\\\"\",\n\t \"\\\"image classification\\\"\",\n\t \"\\\"Machine Learning\\\"\",\n\t \"\\\"Neural Networks\\\"\",\n\t \"\\\"Web development\\\"\",\n\t \"[\\\"tensorFlow.js\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\",\n\t \"url\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\",\n\t \"name\": \"How to Use TensorFlow.js for Image Classification - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:14:10+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:55+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"How to Use TensorFlow.js for Image Classification\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use TensorFlow.js for Image Classification - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/","og_locale":"en_US","og_type":"article","og_title":"How to Use TensorFlow.js for Image Classification","og_description":"Image classification is a common task in machine learning where we train a model to classify images into different categories or labels. TensorFlow.js is a powerful library that allows us to run machine learning models directly in the browser using JavaScript. In this tutorial, we will learn how to use Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:10+00:00","article_modified_time":"2023-11-05T05:47:55+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Use TensorFlow.js for Image Classification","datePublished":"2023-11-04T23:14:10+00:00","dateModified":"2023-11-05T05:47:55+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/"},"wordCount":791,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Artificial Intelligence\"","\"Data Science\"","\"image classification\"","\"Machine Learning\"","\"Neural Networks\"","\"Web development\"","[\"tensorFlow.js\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/","url":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/","name":"How to Use TensorFlow.js for Image Classification - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:10+00:00","dateModified":"2023-11-05T05:47:55+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-use-tensorflow-js-for-image-classification\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Use TensorFlow.js for Image Classification"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4255"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4255"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4255\/revisions"}],"predecessor-version":[{"id":4306,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4255\/revisions\/4306"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4255"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}