Home
Create a web app to visually interact with objects detected using machine learning
Use an open source object detector deep learning model to display and filter objects recognized in an image in a web application
Artificial Intelligence
The IBM Model Asset eXchange (MAX) has given application developers without data science experience easy access to prebuilt machine learning models. This code pattern shows how to create a simple web application to visualize the text output of a MAX model. The web app uses the Object Detector from MAX and creates a simple web UI that displays bounding boxes around detected objects in an image and lets you filter the objects based on their label and probable accuracy given by the model.
By Alex Bozarth
In this Code Pattern we will use one of the models from the Model Asset eXchange (MAX), an exchange where developers can find and experiment with open source deep learning models. Specifically we will be using the Object Detector to create a web application that will recognize objects in an image and allow the user to filter the objects based on their detected label and prediction accuracy. The web application provides an interactive user interface backed by a lightweight Node.js server using Express. The server hosts a client-side web UI and relays API calls to the model from the web UI to a REST end point for the model. The Web UI takes in an image and sends it to the model REST endpoint via the server and displays the detected objects on the UI. The model's REST endpoint is set up using the docker image provided on MAX. The Web UI displays the detected objects in an image using a bounding box and label and includes a toolbar to filter the detected objects based on their labels or a threshold for the prediction accuracy.
When the reader has completed this Code Pattern, they will understand how to:
- Build a Docker image of the Object Detector MAX Model
- Deploy a deep learning model with a REST endpoint
- Recognize objects in an image using the MAX Model's REST API
- Run a web application that using the model's REST API
- User uses Web UI to send an image to Model API
- Model API returns object data and Web UI displays detected objects
- User interacts with Web UI to view and filter detected objects
- IBM Model Asset Exchange: A place for developers to find and use free and open source deep learning models.