{"id":28223,"date":"2022-03-24T21:08:14","date_gmt":"2022-03-24T21:08:14","guid":{"rendered":"http:\/\/using-machine-learning-to-classify-user-images"},"modified":"2025-03-30T14:11:20","modified_gmt":"2025-03-30T21:11:20","slug":"using-machine-learning-to-classify-user-images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/","title":{"rendered":"Using Machine Learning to Classify User Images"},"content":{"rendered":"

There are plenty of times we see something we don\u2019t recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we\u2019re looking at.<\/p>\n

In this tutorial, we\u2019re going to mix a bit of machine learning with front-end and back-end development using a pre-trained model for image classification. A user will be able to upload an image on the front-end and get an image classification prediction back.<\/p>\n

Setting up the Django environment<\/h2>\n

Let\u2019s start by setting up a Django back-end. The reason I chose this over a JavaScript back-end is that Python has some great machine learning libraries. We\u2019re not going to dive deep into training models because that could be a post of its own, but you will see how a pre-trained model can be used quickly.<\/p>\n

First, create a folder called image-classifier<\/code>. This will hold the client-side and server-side code and will be the root directory for the project.<\/p>\n

We\u2019re going to start by setting up the Django REST API we\u2019ll call to classify any uploaded images. To do that, we\u2019ll need to create a virtual environment to install and run all of the Python libraries we\u2019ll work with. So open your terminal and navigate to the image-classifier<\/code> directory and run the following commands:<\/p>\n

$ python -m venv .venv\n$ source .venv\/bin\/activate\n<\/code><\/span><\/pre>\n
Now that we have an active virtual environment, we can move on to creating a requirements.txt<\/code> file in the root directory. This is where we\u2019ll put all of the project dependencies before we install them. Open this new file and add the following dependency names:<\/p>\n
django\ndjangorestframework\ndjango-cors-headers\nkeras\nnumpy\ntensorflow\n<\/code><\/span><\/pre>\n
Then we can install all of these dependencies with the following command:<\/p>\n
$ pip install -r requirements.txt\n<\/code><\/span><\/pre>\n
With all of the dependencies installed, let\u2019s run some commands to get this API ready to go.<\/p>\n
Getting the settings in place for Django Rest Framework<\/h3>\n
Since all of the server-side code will be stored in its own folder, we can start by running a command to create the Django app in a new sub-folder called server<\/code>:<\/p>\n
$ django-admin startproject server\n<\/code><\/span><\/pre>\n
This command creates a new Django project. Next, we can create an app inside of this project called classifier<\/code>. Navigate to the new server<\/code> directory in a terminal and run the following command:<\/p>\n
$ python manage.py startapp classifier\n<\/code><\/span><\/pre>\n
This gives us a new sub-directory inside the server<\/code> folder with a lot of new files to handle the views and models for the image classifier functionality we\u2019ll be creating. Since this is a new app in our Django project, we need to register it in the settings.py<\/code> file. Go to the inner server<\/code> folder and open this settings.py<\/code> file and add two apps to the end of the list of INSTALLED_APPS<\/code>:<\/p>\n
...\nINSTALLED_APPS = [\n    'django.contrib.admin'<\/span>,\n    'django.contrib.auth'<\/span>,\n    'django.contrib.contenttypes'<\/span>,\n    'django.contrib.sessions'<\/span>,\n    'django.contrib.messages'<\/span>,\n    'django.contrib.staticfiles'<\/span>,\n    'rest_framework'<\/span>,\n    'corsheaders'<\/span>,\n    'classifier'<\/span>\n]\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This lets Django know we\u2019re using the Django Rest Framework (DRF) and that we have a custom app to use as well. We also need to update a few other things in this settings.py<\/code> file so we don\u2019t run into CORS errors when we connect the front-end. So find the MIDDLEWARE<\/code> array and add the last line here:<\/p>\n
...\nMIDDLEWARE = [\n    'django.middleware.security.SecurityMiddleware'<\/span>,\n    'django.contrib.sessions.middleware.SessionMiddleware'<\/span>,\n    'django.middleware.common.CommonMiddleware'<\/span>,\n    'django.middleware.csrf.CsrfViewMiddleware'<\/span>,\n    'django.contrib.auth.middleware.AuthenticationMiddleware'<\/span>,\n    'django.contrib.messages.middleware.MessageMiddleware'<\/span>,\n    'django.middleware.clickjacking.XFrameOptionsMiddleware'<\/span>,\n    'corsheaders.middleware.CorsMiddleware'<\/span>,\n]\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then at the very bottom of the settings.py<\/code> file, add this new array to allow the front-end access to the API we\u2019ll build:<\/p>\n
...\nCORS_ALLOWED_ORIGINS = [\n    'http:\/\/localhost:3000'<\/span>,\n]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that we have all of the settings in place, we can apply a migration to initialize a SQLite database and create the superuser for the project. You can find the details for the database in the settings.py<\/code> file we just modified in the DATABASES<\/code> object.<\/p>\n
To do the migrate and create the superuser, go to the server<\/code> directory in the image-classifier<\/code> directory in a terminal and run the following commands:<\/p>\n
$ python manage.py migrate\n$ python manage.py createsuperuser\n<\/code><\/span><\/pre>\n
The migrate command will generate some SQLite files in your server<\/code> directory. The superuser command will prompt you for a username, email address, and password. You can skip the email address and bypass the password validation if you\u2019re developing locally, but you should definitely have those set if you plan on deploying to a different environment later.<\/p>\n
This is a good point to stop and make sure that the Django project will run. So in your terminal, navigate to image-classifier\/server<\/code> and run the following command:<\/p>\n
$ python manage.py runserver 8001\n<\/code><\/span><\/pre>\n
This will start up the project on port 8001 and you should see this default success page.<\/p>\n
\"default<\/p>\n
Now that we have confirmation that the project works, let\u2019s start building the API.<\/p>\n
Making the classifier data model<\/h3>\n
Let\u2019s start by making a model for the classifier to describe the data we\u2019re expecting. Open the classifier\/models.py<\/code> file and add the following code to define the model for our classifier:<\/p>\n
from django.db import models\n\nclass Classifier(models.Model):\n    image_url = models.CharField(max_length=1000)\n    classification = models.CharField(max_length=50)\n<\/code><\/span><\/pre>\n
This model lets us include an image URL which we\u2019ll get as soon as the user uploads an image to Cloudinary through the front-end widget and it will have the predicted classification of the image.<\/p>\n
One of the best things about Django is the admin panel because it lets us see all of the things we\u2019ve defined in the project. To ensure that we can access this model from the admin panel, we need to register this model with Django in the classifier\/admin.py<\/code> file. So open that file and add the following code:<\/p>\n
from<\/span> django.contrib import<\/span> admin\nfrom<\/span> .models import<\/span> Classifier\n\nadmin.site.register(Classifier)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that this new model has been registered, we need to make a migration for this change to be reflected in the database. So we\u2019ll run a couple of commands to do this:<\/p>\n
$ python3 manage.py makemigrations\n$ python3 manage.py migrate\n<\/code><\/span><\/pre>\n
This will create a new migration file and then actually perform the migration. That means the table schema has been updated to include a Classifier<\/code> table along with two columns we defined in the model.<\/p>\n
With a newly defined and migrated model, we can start working with the best part of DRF, serializers.<\/p>\n
Adding the serializer<\/h3>\n
Serializers are responsible for converting Python models to JSON and taking JSON and converting it to Python models. This might sound trivial, but that can be pretty challenging with DRF when you start handling more complex requests and responses.<\/p>\n
We\u2019ll need to write a custom serializer for the classifier model. Inside the classifier<\/code> folder, add a new file named serializers.py<\/code> and write the following code in it:<\/p>\n
from rest_framework import serializers\nfrom .models import Classifier\n\nclass ClassifierSerializer(serializers.ModelSerializer):\n    image_url = serializers.CharField(max_length=1000)\n    classification = serializers.CharField(max_length=50)\n    \n    class Meta:\n        model = Classifier\n        fields = ('__all__')\n<\/code><\/span><\/pre>\n
This takes our model and serializes it in a way that can be consumed in the API. Now that we have the data concerns wrapped up, let\u2019s turn our attention to the API.<\/p>\n
Writing the API<\/h3>\n
Let\u2019s open the classifier\/views.py<\/code> file and create a class with a POST method to handle user image uploads:<\/p>\n
from rest_framework.views import APIView\nfrom rest_framework.response import Response\nfrom rest_framework import status\nfrom .serializers import ClassifierSerializer\n\nclass ClassifierViews(APIView):\n    def post(self, request):\n        serializer = ClassifierSerializer(data=request.data)\n        \n        if serializer.is_valid():\n        \n            # Machine learning model goes here to get the real classification label\n            \n            serializer.classification = 'puddle'\n            serializer.save()\n\n            return Response({'status': 'success', 'data': serializer.data}, status=status.HTTP_200_OK)\n        else:\n            return Response({'status': 'error', 'data': serializer.errors}, status.HTTP_BAD_REQUEST)\n<\/code><\/span><\/pre>\n
This is the base of what we\u2019ll add our machine learning model to. Let\u2019s walk through this code first. In the post<\/code> method, we create a serializer object from the request.data<\/code> that\u2019s passed from the front-end. Since the user is only uploading the image, we\u2019ll have to use our machine learning model to get the classification value to make our serializer valid. For now, we have the puddle<\/code> placeholder for this.<\/p>\n
Next, we check if the serializer is valid and if it is, we go ahead and save this classified image and its label to the database. Once the record is saved, we return the data in a response to the front-end along with the correct status code and message. If there\u2019s something wrong with the serializer, we return an error to the front-end.<\/p>\n
The next step is adding an endpoint to use this post<\/code> method. To do this, we need to add a new line to the urlpatterns<\/code> array in the server\/server\/urls.py<\/code> file. So open that file and add the last line to that urlpatterns<\/code> array:<\/p>\n
from<\/span> django.contrib import<\/span> admin\nfrom<\/span> django.urls import<\/span> path, include\n\nurlpatterns = [\n    path('admin\/'<\/span>, admin.site.urls),\n    path('api\/'<\/span>, include('classifier.urls'<\/span>))\n]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this endpoint in place, we just have a few more things to add to the classifier<\/code> app. In the classifier<\/code> directory, make a new file called urls.py<\/code> and add this code:<\/p>\n
from<\/span> django.urls import<\/span> path\nfrom<\/span> .views import<\/span> ClassifierViews\n\nurlpatterns = [\n    path('classifier\/'<\/span>, ClassifierViews.as_view())\n]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The path<\/code> method takes a couple of arguments to define the sub-path where this view should be accessible and it takes the class name we make in the views.py<\/code> file to process requests users send.<\/p>\n
Alright! Now we can run the app with the following command and test out the API:<\/p>\n
$ python manage.py runserver 8001\n<\/code><\/span><\/pre>\n
Then navigate to the api\/classifier<\/code> route in the browser and you should see a page like this:<\/p>\n
\"classifier<\/p>\n
Don\u2019t worry about it saying the GET method isn\u2019t allowed. That just means we don\u2019t have an implementation for that at the moment. Try adding a classifier record by writing the following JSON in the Content<\/code> field just to test out the API:<\/p>\n
{\n    \"image_url\"<\/span>: \"https:\/\/test.com\/cat.jpg\"<\/span>,\n    \"classification\"<\/span>: \"bowl\"<\/span>\n}\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
When you submit this post request, you should see a success message on the page like this.<\/p>\n
\"successfully<\/p>\n
We have this endpoint working so now we just have to add the machine learning model to classify the images we upload.<\/p>\n
Adding the image classifier prediction model<\/h3>\n
Open up the views.py<\/code> file in the classifier<\/code> folder. We\u2019re going to replace that comment about the machine learning model now. First, we need to import a few more libraries. So add the following lines to your import statement list:<\/p>\n
...\nfrom keras.applications.vgg16 import<\/span> VGG16, preprocess_input,decode_predictions\nfrom<\/span> keras.preprocessing import<\/span> image\nimport<\/span> numpy as<\/span> np\nimport<\/span> wget\nimport<\/span> os\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that we have all of the libraries we need, it\u2019s time to finally implement the classifier model. Using a pre-trained model is the easiest way to make the image classifier so we don\u2019t have to do machine learning engineering for this. We\u2019re going to do a big update to the code inside the if-statement in our file. So update your code with the following:<\/p>\n
if<\/span> serializer.is_valid():\n    model = VGG16(weights='imagenet'<\/span>)\n    \n    # Need to download the image file for the classifier to work<\/span>\n    image_filename = wget.download(serializer.validated_data['image_url'<\/span>])\n    \n    #image loaded in PIL (Python Imaging Library)<\/span>\n    img = image.load_img(image_filename,color_mode='rgb'<\/span>, target_size=(224<\/span>, 224<\/span>))\n    \n    # Converts a PIL Image to 3D Numy Array<\/span>\n    x = image.img_to_array(img)\n    \n    # Adding the fouth dimension, for number of images<\/span>\n    x = np.expand_dims(x, axis=0<\/span>)\n    \n    x = preprocess_input(x)\n    \n    features = model.predict(x)\n    \n    predictions = decode_predictions(features)[0<\/span>]\n    predictions.sort(key = lambda x: x[2<\/span>])\n    \n    predicted_classification = predictions[-1<\/span>][1<\/span>]\n    \n    serializer.validated_data['classification'<\/span>] = predicted_classification\n    \n    serializer.save()\n    \n    # Delete the image file so we don't crowd the project directory<\/span>\n    os.remove(image_filename)\n    \n    return<\/span> Response({'status'<\/span>: 'success'<\/span>, 'data'<\/span>: serializer.data}, status=status.HTTP_200_OK)\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s walk through this code. First, we make our model by using the VGG16<\/code> pre-trained model from the Keras library. Next, we need to download the image from the URL that users submit. This is so the model can access the raw binary data of the image. Then we do some data transformations to the image to get it into the correct format for the image to process.<\/p>\n
After that, we get the features<\/code> from the image that the model will use to make its predictions. Then we get the top 5 potential classification labels for the image. The raw data will look something like this:<\/p>\n
[[('n02123597', 'Siamese_cat', 0.4564548<\/span>), ('n02124075', 'Egyptian_cat', 0.29191914<\/span>), ('n02123045', 'tabby', 0.045494787<\/span>), ('n02123159', 'tiger_cat', 0.018867875<\/span>), ('n02127052', 'lynx', 0.01380215<\/span>)]]\n<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n
That\u2019s why we get the array with the tuples and sort them so that we can parse out the most likely classification for the uploaded image. Next, we update the serializer data with that label and save the image and classification to the database. Lastly, we delete the downloaded image from the project and return the image and label to the front-end in the response.<\/p>\n
The hardest part is done now! Getting the back-end set up and making sure the image classifier works was the most tedious part. Now we can move to the front-end and create a quick image uploader in React using the Cloudinary widget.<\/p>\n
Adding the React front-end<\/h2>\n
Go to the root image-classifier<\/code> directory and run the following command to make the React project:<\/p>\n
$ npx create-react-app client\n<\/code><\/span><\/pre>\n
This will create a new sub-directory called client<\/code> that will have all of the files we need to build this front-end. There are a few packages we need to install to use the Cloudinary upload widget. Navigate to the client<\/code> folder in your terminal and run the following command:<\/p>\n
$ yarn add react-cloudinary-upload-widget axios\n<\/code><\/span><\/pre>\n
Now we can go to the App.js<\/code> file and delete everything to start fresh. First, we\u2019ll add these imports and the component we\u2019ll export:<\/p>\n
import<\/span> { WidgetLoader, Widget } from<\/span> 'react-cloudinary-upload-widget'<\/span>;\nimport<\/span> { useState } from<\/span> 'react'<\/span>;\nimport<\/span> axios from<\/span> 'axios'<\/span>;\n\nfunction<\/span> App<\/span>(<\/span>) <\/span>{\n\n}\n\nexport<\/span> default<\/span> App\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Inside of the App<\/code> component, we\u2019ll need a few states and a helper function. So go ahead and add these inside of the component:<\/p>\n
function<\/span> App<\/span>(<\/span>) <\/span>{\n  const<\/span> [classification, setClassification] = useState(''<\/span>)\n  const<\/span> [imageUrl, setImageUrl] = useState()\n\n  function<\/span> getImageLabel<\/span>(results<\/span>) <\/span>{\n    setImageUrl(results.info.url)\n\n    const<\/span> data = {\n      image_url<\/span>: results.info.url,\n      classification<\/span>: 'placeholder'<\/span>,\n    }\n\n    axios.post('http:\/\/127.0.0.1:8001\/api\/classifier\/'<\/span>, data)\n    .then(response<\/span> =><\/span> {\n      setClassification(response.data.data.classification)\n    })\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we set a couple of states so that we can display these values to the user as they upload images and we return predictions. Next, we make the getImageLabel<\/code> function which will take the results from the Cloudinary upload to get the image URL, put the required data in the right format, and then it makes the POST request to the back-end and returns the classification label.<\/p>\n
There are only a couple of things left for us to do now. Let\u2019s add the uploader widget to the component.<\/p>\n
Uploading the image<\/h3>\n
You\u2019ll need a Cloudinary account to use this widget and you can sign up for one for free here<\/a>. Make sure you note what your cloudName<\/code> and uploadPreset<\/code> values are. You\u2019ll need them to upload the images and get the URL to send to the back-end. Below the getImageLabel<\/code> function, let\u2019s add a return statement with the following code:<\/p>\n
return<\/span> (\n    <div style={{ margin: '24px'<\/span> }}>\n      <WidgetLoader \/>\n      <Widget\n        sources={['local'<\/span>, 'camera'<\/span>]}\n        cloudName={'your_cloud_name'<\/span>}\n        uploadPreset={'your_upload_preset'<\/span>}\n        buttonText={'Upload Image'<\/span>}\n        style={{\n          color: 'white'<\/span>,\n          border: 'none'<\/span>,\n          width: '120px'<\/span>,\n          backgroundColor: 'green'<\/span>,\n          borderRadius: '4px'<\/span>,\n          height: '25px'<\/span>,\n        }}\n        folder={'images_to_classify'<\/span>}\n        onSuccess={getImageLabel}\n      \/>\n    <\/div>\n)\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Navigate to the client<\/code> directory in your terminal and start the app up with yarn start<\/code>. You should just see a button like the one below on your page. Clicking this will bring up the whole widget where you can choose the image, whether or not to crop it, and a number of other options.<\/p>\n
\"upload<\/p>\n
The last thing we need to do is display the image and its label once the classification is returned from the back-end.<\/p>\n
Displaying the classification<\/h3>\n
In the return statement, just below the Widget<\/code> element, add this conditional render:<\/p>\n
{\n    classification !== ''<\/span> &&\n    <><\/span>\n        <h2<\/span>><\/span>{classification}<\/h2<\/span>><\/span>\n        <img<\/span> src<\/span>={imageUrl}<\/span> height<\/span>={250}<\/span> width<\/span>={250}<\/span> alt<\/span>='uploaded by user'<\/span> \/><\/span>\n    <\/><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll only display the image and classification label when there is a classification set in the state. Go ahead and upload an image and you should see the image and returned classification like below!<\/p>\n
\"uploaded<\/p>\n
Conclusion<\/h2>\n
Machine learning gets mixed in with web development like this pretty often. Usually, there\u2019s a team of ML engineers working hard to create an accurate and fast model and we get the fun part of adding it to our existing code. Hopefully, this helped shed some light on why teams choose back-end languages other than JavaScript. Sometimes they just have the functionality you need.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28224,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246,371],"class_list":["post-28223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nUsing Machine Learning to Classify User Images<\/title>\n<meta name=\"description\" content=\"There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Machine Learning to Classify User Images\" \/>\n<meta property=\"og:description\" content=\"There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T21:08:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T21:11:20+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Using Machine Learning to Classify User Images\",\"datePublished\":\"2022-03-24T21:08:14+00:00\",\"dateModified\":\"2025-03-30T21:11:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\",\"name\":\"Using Machine Learning to Classify User Images\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA\",\"datePublished\":\"2022-03-24T21:08:14+00:00\",\"dateModified\":\"2025-03-30T21:11:20+00:00\",\"description\":\"There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA\",\"width\":3024,\"height\":4032},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Machine Learning to Classify User Images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using Machine Learning to Classify User Images","description":"There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.","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":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/","og_locale":"en_US","og_type":"article","og_title":"Using Machine Learning to Classify User Images","og_description":"There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T21:08:14+00:00","article_modified_time":"2025-03-30T21:11:20+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/"},"author":{"name":"","@id":""},"headline":"Using Machine Learning to Classify User Images","datePublished":"2022-03-24T21:08:14+00:00","dateModified":"2025-03-30T21:11:20+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA","keywords":["Guest Post","Image","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/","name":"Using Machine Learning to Classify User Images","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA","datePublished":"2022-03-24T21:08:14+00:00","dateModified":"2025-03-30T21:11:20+00:00","description":"There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA","width":3024,"height":4032},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-machine-learning-to-classify-user-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using Machine Learning to Classify User Images"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925084\/Web_Assets\/blog\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f\/a02705a520bd83e0a45035584277df5dc53b97bd-3024x4032-1_28224a870f.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28223"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28223\/revisions"}],"predecessor-version":[{"id":37332,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28223\/revisions\/37332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28224"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Finished code<\/h2>\n
You can find the complete code in this repo<\/a>. You can also check out the app in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cvigilant-paper-wuhood\u201d\nid=\u201cvigilant-paper-wuhood\u201d\n\/><\/p>\n