{"info":{"_postman_id":"6aa162c5-cc7e-4789-81c6-aa551fc0cb62","name":"Visualize the MobileNet Model🖼️","description":"

In this collection we will be using an API I created specially for this workspace. This API for a given image shows what the convolution layers in the MobileNet model [1] identify by implementing GradCam [2] and visualizes those with the Postman Visualizer. This API runs the MobileNet model and implements GradCam using TensorFlow under the hood as shown in greater details in the upcoming sections.

About the API📝

This API was deployed on GCP Cloud Functions and is extremely easy to deploy your own such API. All the code required to build this API is open-sourced by me and can be found here. You can simply download this and deploy it to your own Cloud Function with this command:

gcloud functions deploy conv_vis --runtime python38 --memory 8196MB --trigger-http --allow-unauthenticated\n

Or even do this with the Google Cloud GUI.

Under the Hood⚙️

Though you already have the source code, I will quickly show what happens under the hood when you call this API I built:

Identify query parameters you passed
Take the image from the query parameters, resize it to (224, 224) and convert it to an array
Load the MobileNet model and populate it with pre-trained weights on ImageNet
Implement GradCam in TensorFlow to visualize convolution layers
Place generated GradCam outputs on top of the original image
Save this updated image to a Google Cloud bucket with the file name passed in query params
Return the output image in JSON format

Using the API✅

Endpoint URL

https://us-central1-sound-fastness-257416.cloudfunctions.net\n

GET /postmanhack

Request Params

\n
Be sure to change the collection level variable if you want to try this out with your own image and not directly the request parameter to allow Postman Visualizer to use the image.
\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Key	Description
image	URL of the image you put in the model
destination	File name of the destination image, remember to use extension (.png , .jpg etc)

Just want to test out?

I got you covered, I have added an example image as the default value for you to try out here are the default values:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Key	Default Value
image	https://i.imgur.com/taUKyu1.jpg
destination	A random string

Using the Postman Visualizer🎨

Since the API sends us back an image we can easily use the Postman Visualizer to visualize and make sense of the returned image.

$\"\"$

References📑

[1] Howard, Andrew G., et al. “MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications.” ArXiv:1704.04861 [Cs], Apr. 2017. arXiv.org, http://arxiv.org/abs/1704.04861.

[2] Selvaraju, Ramprasaath R., et al. “Grad-CAM: Visual Explanations from Deep Networks via Gradient-Based Localization.” International Journal of Computer Vision, vol. 128, no. 2, Feb. 2020, pp. 336–59. arXiv.org, doi:10.1007/s11263-019-01228-7.

[3] Russakovsky, Olga, et al. “ImageNet Large Scale Visual Recognition Challenge.” ArXiv:1409.0575 [Cs], Jan. 2015. arXiv.org, http://arxiv.org/abs/1409.0575.

\n","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json","toc":[],"owner":"15031376","collectionId":"6aa162c5-cc7e-4789-81c6-aa551fc0cb62","publishedId":"TzsWtA3q","public":true,"customColor":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"EF5B25"},"publishDate":"2021-07-20T12:12:33.000Z"},"item":[{"name":"Receive Visualizations","event":[{"listen":"test","script":{"id":"252ee11a-3762-436b-b8b2-31659f6a050b","exec":["pm.test(\"Status code is 200\", () => {\r"," pm.response.to.have.status(200);\r","});\r","\r","pm.test(\"Function-Execution-Id header is present\", () => {\r"," pm.response.to.have.header(\"Function-Execution-Id\");\r","});\r","\r","pm.test(\"Make sure reponse was from GCF\", () => {\r"," pm.expect(pm.response.headers.get('Server')).to.eql('Google Frontend');\r","});\r","\r","const schema = {\r"," properties: {\r"," output_image: {type: \"string\"}\r"," }\r","};\r","\r","pm.test('Schema is valid', function() {\r"," pm.response.to.have.jsonSchema(schema);\r","});\r","\r","let final = pm.collectionVariables.get(\"Image URL\")\r","\r","let template = `\r","\r","\r","\r","\r","\r","\r","

\r","

Visualize an ML Model

\r","

\r","\r","

Here we will be passing in an image to the API I built which runs the MobileNet model and implements GradCam with\r"," TensorFlow to allow us to see how this Deep Learning model learns or produce \"visual explanations\". And then uuse \r"," Postman Visualizer to do so. Take a look at the results below🔽

\r","\r","\r","\r"," \r"," \r"," \r"," \r","\r","\r"," \r"," \r"," \r"," \r","\r","

Original Image	API + Postman Visualizer\r","

\r","\r","\r","`\r","\r","pm.visualizer.set(template, { \r"," res: pm.response.json(),\r"," fin: final\r","})"],"type":"text/javascript"}}],"id":"7d348557-99a6-4977-86d2-3c0b596252ce","protocolProfileBehavior":{"disableBodyPruning":true,"disabledSystemHeaders":{"host":true,"user-agent":true,"accept":true}},"request":{"method":"GET","header":[],"url":"https://us-central1-sound-fastness-257416.cloudfunctions.net/postmanhack?image=https://i.imgur.com/taUKyu1.jpg","description":"

To see the comparison visualization between the original and new one, for custom image be sure to change the variable \"Image URL\" with your custom image URL.

Note: This API is quite compute intensive and since is a personal project, it might take some time to run usually 8 - 15 seconds. Since this is quite intensive and run as a hobby project it may sometimes fail to process a request due to excessive load, please try again.

\n","urlObject":{"host":["https://us-central1-sound-fastness-257416.cloudfunctions.net/postmanhack"],"query":[{"description":{"content":"

The Image you put in the model

\n","type":"text/plain"},"key":"image","value":"https://i.imgur.com/taUKyu1.jpg"},{"disabled":true,"description":{"content":"

File name of the destination image, be sure to append it with the extension (.png, .jpg or others)

\n","type":"text/plain"},"key":"destination","value":"test-image-yourname.png"}],"variable":[]}},"response":[{"id":"61859b6d-4a50-4dfe-9bf9-816471759550","name":"Receive Visualizations","originalRequest":{"method":"GET","header":[],"url":{"raw":"https://us-central1-sound-fastness-257416.cloudfunctions.net/postmanhack?image=https://i.imgur.com/taUKyu1.jpg","host":["https://us-central1-sound-fastness-257416.cloudfunctions.net/postmanhack"],"query":[{"key":"image","value":"https://i.imgur.com/taUKyu1.jpg","description":"The Image you put in the model"},{"key":"destination","value":"test-image-yourname.png","description":"File name of the destination image, be sure to append it with the extension (.png, .jpg or others)","disabled":true}]}},"status":"OK","code":200,"_postman_previewlanguage":"html","header":[{"key":"Content-Type","value":"text/html; charset=utf-8"},{"key":"Function-Execution-Id","value":"cjxj03h26ugo"},{"key":"X-Cloud-Trace-Context","value":"602c9bff16907b05a684bf0f8e4e7865;o=1"},{"key":"Date","value":"Mon, 26 Jul 2021 06:16:33 GMT"},{"key":"Server","value":"Google Frontend"},{"key":"Content-Length","value":"74"},{"key":"Alt-Svc","value":"h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000,h3-T051=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,quic=\":443\"; ma=2592000; v=\"46,43\""}],"cookie":[],"responseTime":null,"body":"{\"output_image\": \"https://storage.googleapis.com/postmanhack/opnQIZQ.png\"}"}],"_postman_id":"7d348557-99a6-4977-86d2-3c0b596252ce"}],"event":[{"listen":"prerequest","script":{"id":"06c89df0-e863-49de-bfc6-f09cd2c36034","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"a6606fbd-b1be-49bc-98ae-5c2eefc198cb","type":"text/javascript","exec":[""]}}],"variable":[{"key":"Destination File","value":"test-image-yourname.png"},{"key":"Image URL","value":"https://i.imgur.com/taUKyu1.jpg"},{"key":"Hosted Model API","value":"https://us-central1-sound-fastness-257416.cloudfunctions.net/postmanhack"}]}