gradio/guides/image_classification_in_tensorflow.md
Abubakar Abid 63d0a28c08
Website Design Changes (#1015)
* adding gallery

* added netlify files

* new navbar design

* header section new design

* used by section new design

* cards section new design

* integrates with section new design

* customer stories section new design

* footer and gradient

* demos section new design

* docs fixes

* docs reorg

* docs reorg

* upgrading to tailwind 3

* tailwind config changes

* navbar new design

* fixing body on all pages

* Updating Guides  (#1012)

* updating getting started

* updated codecov version

* tweaks to gs

* added netlify file

* added netlify file

* website prebuild script

* increased code size

* blocks

* edits

* blocks_hello

* hello world

* guide

* merge main

* added flipper demo

* guide

* guide

* add guides

* tweak to refresh website

* header section new design

* demos section new design

* cards design

* used by section

* tweets section

* footer on all pages

* mobile responsive fixes

* mobile responsive fixes

* https fonts

* completed blocks guide

* unify components

* minor tweaks

* docs headers styling and navigation pane

* parameter code blocks

* styling description and input type

* parameter tables and other styling

* only documenting interactive components when possible

* guides

* embedding not working

* demos not working

* fixing demo code

* fixing demos

* demo fix

* updated demos

* updated demos

* ui update

* updated docstrings

* updated code snippets so they run

* updating docs

* Interface docs

* updating interface

* fixing parameters in interface.py

* required and defaults for interface, and styling

* fixing up interface (#1207)

* fixing up interface

* fixed interface methods

* formatting

* updating interface docs

* updating interface docs

* formatting

* docstring to load from docstrings

* fixed colors

* finalize interface content

* interface examples

* fixed examples

* added some blocks docs

* blocks

* component fixes

* reorganized some files (#1210)

* formatting

* added info for every component

* fixes

* blocks docs

* added blocks demos

* adding combined interfaces

* added parallel, series

* Doc: layout update (#1216)

* doc layout

* home spacing

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* adding layouts

* layouts done

* added events for components

* formatting and https

* brings back dropdown and other components

* fix header ids

* moved ids and fixed nav

* added parameters for remaining component

* docstring fixes

* landing page demos

* demo window placeholder

* demo nav

* fixed test

* formatting

* demo code

* correctly importing gradio  css/js

* remove keyvalues

* modify launch script to move gradio assetS

* components embedded test

* correct demo name

* hide try demo and embedding

* local devserver changes

* create embedding json with configs

* changes

* fixes

* comment out layout docs

* demo work

* demo fixes

* demo embedding fixes

* typo

* jinja fix

* demo nav fix

* hide demo button

* formatting

* removed whitespace

* remove newline from parameter

* reverting comments

Co-authored-by: aliabd <ali.si3luwa@gmail.com>
Co-authored-by: Victor Muštar <victor.mustar@gmail.com>
Co-authored-by: Ali Abid <aabid94@gmail.com>
2022-05-13 19:48:46 -07:00

5.3 KiB

Image Classification in TensorFlow and Keras

related_spaces: https://huggingface.co/spaces/abidlabs/keras-image-classifier tags: VISION, MOBILENET, TENSORFLOW Docs: image, label

Introduction

Image classification is a central task in computer vision. Building better classifiers to classify what object is present in a picture is an active area of research, as it has applications stretching from traffic control systems to satellite imaging.

Such models are perfect to use with Gradio's image input component, so in this tutorial we will build a web demo to classify images using Gradio. We will be able to build the whole web application in Python, and it will look like this (try one of the examples!):

Let's get started!

Prerequisites

Make sure you have the gradio Python package already installed. We will be using a pretrained Keras image classification model, so you should also have tensorflow installed.

Step 1 — Setting up the Image Classification Model

First, we will need an image classification model. For this tutorial, we will use a pretrained Mobile Net model, as it is easily downloadable from Keras. You can use a different pretrained model or train your own.

import tensorflow as tf

inception_net = tf.keras.applications.MobileNetV2()

This line automatically downloads the MobileNet model and weights using the Keras library.

Step 2 — Defining a predict function

Next, we will need to define a function that takes in the user input, which in this case is an image, and returns the prediction. The prediction should be returned as a dictionary whose keys are class name and values are confidence probabilities. We will load the class names from this text file.

In the case of our pretrained model, it will look like this:

import requests

# Download human-readable labels for ImageNet.
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")

def classify_image(inp):
  inp = inp.reshape((-1, 224, 224, 3))
  inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)
  prediction = inception_net.predict(inp).flatten()
  confidences = {labels[i]: float(prediction[i]) for i in range(1000)}
  return confidences

Let's break this down. The function takes one parameter:

  • inp: the input image as a numpy array

Then, the function adds a batch dimension, passes it through the model, and returns:

  • confidences: the predictions, as a dictionary whose keys are class labels and whose values are confidence probabilities

Step 3 — Creating a Gradio Interface

Now that we have our predictive function set up, we can create a Gradio Interface around it.

In this case, the input component is a drag-and-drop image component. To create this input, we can use the "gradio.inputs.Image" class, which creates the component and handles the preprocessing to convert that to a numpy array. We will instantiate the class with a parameter that automatically preprocesses the input image to be 224 pixels by 224 pixels, which is the size that MobileNet expects.

The output component will be a "label", which displays the top labels in a nice form. Since we don't want to show all 1,000 class labels, we will customize it to show only the top 3 images.

Finally, we'll add one more parameter, the examples, which allows us to prepopulate our interfaces with a few predefined examples. The code for Gradio looks like this:

import gradio as gr

gr.Interface(fn=classify_image, 
             inputs=gr.inputs.Image(shape=(224, 224)),
             outputs=gr.outputs.Label(num_top_classes=3),
             examples=["banana.jpg", "car.jpg"]).launch()

This produces the following interface, which you can try right here in your browser (try uploading your own examples!):


And you're done! That's all the code you need to build a web demo for an image classifier. If you'd like to share with others, try setting share=True when you launch() the Interface!